图像地图在Firefox中无法正常工作！在Chrome和Safari中正常。

Question

我制作了一个图像映射，但在Firefox中无法正常工作。在Chrome和Safari中都可以正常工作。

这是网站 bryanedwardcollins.com

请帮忙！

    <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>

- Bryan Collins

---

你和这个提问者有相同的问题。你的<img>标签需要添加一个#符号：<img usemap="#menumap">。参考链接为：https://dev59.com/Hl7Va4cB1Zd3GeqPHjjD - Ian Hunter

Answer 1

我也遇到了这个问题。看起来Chrome会解析img的属性usemap="mapName"，而不需要#符号。但是，如果你不包含#符号，那么在FireFox和Internet Explorer中，地图就无法与图片关联。

以下是正确的方法：

<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>

请注意 usemap="#hrdMap" 中的井号符号与 map 标记的 name="hdrMap" 属性相匹配。这可能会让人有些困惑，因为很多人将 # 符号与引用 id 属性联系在一起。

希望这有所帮助

- Paul Renton

---

这是个问题，火狐太过标准了。 - IlPADlI

Answer 2

另一个Firefox中的<map>问题及其解决方案 - 确保您没有在<map>内部使用任何锚点(<a>)元素。如果<map>有任何<a>子元素，Firefox将忽略整个<map>元素。

不使用<a>元素可能是显而易见的，因为<area>具有href属性，但例如，在Ember.js中，编写以下代码对我很有用：

<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>

我不能手动指定href属性，最好的做法是将其留给link-to助手。

对于我的特定Ember.js问题，解决方法只是使用另一个标记代替<a>。因此，向link-to助手添加tagName='span'就解决了我的问题:

{{#link-to 'training.shoulders' tagName='span'}}
  <!-- ... -->
{{/link-to}}

注意：在Chrome浏览器中，<map>标签里面的<a>元素可以正常工作。

- Daniel Kmak