Bản đồ hình ảnh không hoạt động trên Firefox! hoạt động tốt trong Chrome + Safari

Question

Ive đã tạo một bản đồ hình ảnh và nó không hoạt động trong firefox. Nó hoạt động tốt trong cả Chrome và Safari.

Đây là trang web bryanedwardcollins.com

Xin giúp!

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

Answer 1

Tôi cũng gặp vấn đề này. Có vẻ như Chrome sẽ phân tích cú pháp thuộc tính img usemap = "mapName" mà không có ký hiệu #. Tuy nhiên, nếu bạn không bao gồm biểu tượng băm '#', bản đồ sẽ không được liên kết với hình ảnh trên FireFox và Internet Explorer.

Dưới đây là cách chính xác để làm điều đó:

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

Thông báo các usemap = "# hrdMap" có một biểu tượng thẻ băm và phù hợp với name = "hdrMap" thuộc tính cho thẻ bản đồ. Điều này có vẻ hơi khó hiểu vì rất nhiều người liên kết biểu tượng # với tham chiếu thuộc tính id.

Hope this helps

Answer 2

Một <map vấn đề trong Firefox và giải pháp cho nó - chắc chắn rằng bạn không sử dụng bất kỳ neo (<a>) yếu tố bên trong <map>. Nếu <map> có bất kỳ <a> trẻ em nào, Firefox sẽ bỏ qua toàn bộ phần tử <map>.

Nó có thể là rõ ràng không sử dụng <a> yếu tố vì <area> có href thuộc tính, nhưng, ví dụ, trong Ember.js nó là hữu ích với tôi, viết mã như thế:

<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ôi có thể' t chỉ định href thuộc tính theo cách thủ công, được coi là phương pháp hay nhất để giữ điều này cho trình trợ giúp link-to.

Giải pháp cho vấn đề Ember.js cụ thể của tôi chỉ sử dụng một thẻ khác thay vì <a>. Vì vậy, thêm tagName='span'-link-to helper giải quyết vấn đề của tôi:

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

Note: Trong Chrome <a> yếu tố bên trong <map> chỉ hoạt động tốt.