我制作了一个图像地图,它在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>
我也偶然发现了这个问题。 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”具有一个哈希标签符号,并且与地图标签的name =“ hdrMap”属性匹配。这似乎有点令人困惑,因为很多人将#符号与引用id属性相关联。
希望这会有所帮助
Firefox中的另一个<map
问题及其解决方案-确保<a>
中没有使用任何anchor(<map>
)元素。如果<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>
。因此,向tagName='span'
助手添加link-to
解决了我的问题:
{{#link-to 'training.shoulders' tagName='span'}}
<!-- ... -->
{{/link-to}}
Note:在Chrome中<a>
中的<map>
元素运行正常。