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.
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 elementid="rules".