Links in HTML image map not working in FireFox, Opera, Chrome and Safari
Is anyone able to help here? I have an image map formed of a .png image which has several 'polygon' areas defined in it, each with a link behind it.
The links work in IE, but for the other browser types listed above, the links do nothing except display the image and the title text over each polygon area.
The code for the image map is as follows:
<img title = "Concept" border = "0" src = "../images/myMap.png usemap = "#myMap">
开发者_如何学编程 <map name = "myMap">
<area shape = "polygon" coords = "315, 230, 545, 415, 260, 575, 10, 700, 10, 285" title = "Rules" href = "#rules" />
<area shape = "polygon" coords = "745, 450, 745, 680, 470, 745, 325, 635, 520, 450" title = "Polling" href = "#polling" />
<area shape = "polygon" coords = "745, 730, 745, 895, 450, 895, 450, 815, 565, 730" title = "Visualisations" href = "#visualisations" />
</map>
All the links point to areas of the page denoted by:
<h2><a name = "#rules">Rules</a></h2>
It is very odd.
The version of the HTML heading the page is:
<!DOCTYPE html>
And I've tried the image as .gif and .jpeg files to no effect.
If I change the links in the image map to:
<area shape = "polygon" coords = "315, 230, 545, 415, 260, 575, 30, 441, 315, 230" title = "rules" href = "<c:url value = '/aboutConcept#rules' />" />
I find things work. I am using JSTL tags.
Thanks to the respondents.
A couple things which may be causing issues:
Use the shape name
poly. That's what the spec calls for http://www.w3.org/TR/REC-html40/struct/objects.html#h-13.6make sure the coordinates are in the exact order. Some browsers choke on out of order coords.
in a polygon, the first and last coordinates need to be the same to close the shape.
Does the URL change when you click? E.g. #rules?
The url (href) "#rules" refers to an element named "rules" not "#rules". IE is being overly tolerant.
You rarely need <a name="rules"> any more, just give any element id="rules".
Worth closing your tags properly as well. You've missed a closing quote on img src:
That may be the cause of your problems as the browser may not even see the usemap property.
加载中,请稍侯......
精彩评论