2013-04-13 83 views
14

我製作了一個圖像映射,但它在Firefox中不工作。它在Chrome和Safari中均可正常工作。圖片地圖無法在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> 
+2

你和這個提問者有同樣的問題。你的''標籤需要一個哈希符號:''http://stackoverflow.com/questions/8479798/having-image-map-problems-in-firefox –

回答

21

我偶然發現了這個問題。看起來,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」有一個散列標籤符號和名稱的地圖標記=「hdrMap」屬性相匹配。這看起來有點令人困惑,因爲很多人將#符號與引用id屬性相關聯。

希望這有助於

+1

這就是這個問題,Firefox是太該死的標準。 – IlPADlI

+1

謝謝你,終於找到了解決方案... – TheBigDoubleA

3

另一個<map問題在Firefox及解決辦法 - 確保你沒有使用任何錨(<a>)內<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> 

我可以」 t手動指定href屬性,認爲最好的做法是將其保留爲link-to幫助程序。

對我的具體Ember.js問題的解決方案是使用另一個標籤,而不是<a>。因此,加入到tagName='span'助手link-to解決我的問題:

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

注意在Chrome中<a>元素中<map>只是正常工作。

相關問題