Image Map not working in Firefox! works fine in Chrome+Safari
Solution 1
I stumbled into this issue as well. It seems that Chrome will parse the img attribute usemap="mapName" without the # symbol. However, if you don't include the hash symbol '#', the map will not be associated with the image on FireFox and Internet Explorer.
Here is the correct way to do it:
<img src="images/header.jpg" id="hdr" name="hdr" usemap="#hdrMap" alt="alt string here" border="0">
<map name="hdrMap" style="cursor:pointer;">
<area shape="rect" coords="720,65,880,0" href="http://www.thisisthefirstlink.com" target="_blank" alt="first link alt">
<area shape="rect" coords="882,65,1024,0" href="http://www.secondlink.com" target="_blank" alt="second link alt">
</map>
Notice the usemap="#hrdMap" has a hash tag symbol and matches the name="hdrMap" attribute for the map tag. This can seem a little confusing because a lot of people associate the # symbol with referencing an id attribute.
Hope this helps
Solution 2
Another <map
issue in Firefox and solution to it - make sure you're not using any anchor(<a>
) elements inside <map>
. If <map>
has any <a>
children Firefox will ignore whole <map>
element.
It might be obvious not to use <a>
elements because <area>
has href
attribute, but, for example, in Ember.js it was useful to me, to write code like that:
<map id='human-image-map' name='human-image' action='showTooltip'>
<section class="front" title="Pokaż ćwiczenia">
{{#link-to 'training.shoulders'}}
<area alt="Barki" shape="poly" coords="39,74,37,75,35,77,33,78,32,76,32,73,32,71,32,68,33,65,33,63,34,61,36,58,37,56,38,54,40,53,42,52,44,51,46,51,48,51,51,50,55,49,57,48,59,47,61,47,59,50,58,52" />
<area alt="Barki" shape="poly" coords="112,74,114,75,117,77,119,79,121,77,121,74,121,71,121,68,119,65,117,62,116,59,113,57,111,54,109,53,106,51,103,50,99,49,96,47,93,46,90,45,90,48,92,50,93,52,95,54,97,56,99,59,101,62,103,65,106,68" />
{{/link-to}}
</section>
</map>
I can't specify href
attribute manually, it's considered best practice to leave this to link-to
helper.
Solution to my specific Ember.js problem was just using another tag instead of <a>
. So, adding tagName='span'
to link-to
helper solved my issue:
{{#link-to 'training.shoulders' tagName='span'}}
<!-- ... -->
{{/link-to}}
Note: In Chrome <a>
elements inside <map>
just work fine.
Related videos on Youtube
Bryan Collins
Updated on September 15, 2022Comments
-
Bryan Collins over 1 year
Ive made a image map and its not working in firefox. It works fine in both Chrome and Safari.
This is the site bryanedwardcollins.com
Please help!
<MAP NAME="menumap" > <AREA HREF="contact.html" ALT="contact" SHAPE="POLY" COORDS="425,100, 572,89, 594,142, 488,150, 460,166, 423,100"> <AREA HREF="insameit.html" ALT="insame i.t." SHAPE="POLY" COORDS="382,239, 462,245, 461,343, 608,344, 610,395, 354,405, 354,341"> <AREA HREF="floorpart.html" ALT="floor part" SHAPE="POLY" COORDS="307,185, 429,185, 430,221, 379,222, 374,235, 283,224"> <AREA HREF="iouse.html" ALT="I O Use" SHAPE="POLY" COORDS="27,18, 231,16, 243,0, 382,0, 253,265, 69,252, 193,73, 27,73"> <AREA HREF="worldpart.html" ALT="world part" SHAPE="POLY" COORDS="25,303, 122,305, 122,448, 27,449"> </MAP>
-
Ian Hunter about 11 yearsYou have the same problem as this asker. Your
<img>
tag needs a hash symbol:<img usemap="#menumap">
stackoverflow.com/questions/8479798/…
-
-
IlPADlI over 9 yearsIt's this problem, firefox is too damn standard.