Карта изображений не работает в Firefox! отлично работает в Chrome + Safari

Ответ 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" имеет символ хэш-тега и соответствует атрибуту name= "hdrMap" для тега карты. Это может показаться немного запутанным, потому что многие люди связывают символ # со ссылкой на атрибут id.

Надеюсь, что это поможет

Ответ 2

Еще одна проблема <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>

Я не могу указать атрибут href вручную, он считает, что лучше всего оставить это для link-to помощника.

Решение моей конкретной проблемы Ember.js заключалось в использовании другого тега вместо <a>. Итак, добавление tagName='span' в link-to помощника решило мою проблему:

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

Примечание. В Chrome <a> элементы внутри <map> работают нормально.