Атрибут name тега <map>

Описание

Атрибут name для тега <map> определяет уникальное имя, которое связывает карту изображения с элементами <img> через атрибут usemap. Это обязательный атрибут для элемента <map>.

Пример использования:
<img src="world-map.png" alt="Карта мира" usemap="#worldmap"> <map name="worldmap"> <area shape="rect" coords="34,44,270,350" alt="Северная Америка" href="north-america.html"> <area shape="circle" coords="337,300,44" alt="Африка" href="africa.html"> </map>

Особенности работы:

Аспект Описание Важно
Синтаксис Должен начинаться с буквы (без пробелов) Чувствителен к регистру
Связь с изображением Создается через usemap="#name" в <img> Решетка (#) обязательна
Уникальность Должен быть уникальным в пределах документа Не должно быть дубликатов

Рекомендации по именованию:

  • Используйте осмысленные имена (main-nav-map)
  • Придерживайтесь одного стиля (kebab-case рекомендуем)
  • Избегайте специальных символов кроме дефиса
  • Не начинайте с цифр

Пример с несколькими картами:

<!-- Первая карта --> <img src="header.png" usemap="#header-map"> <map name="header-map"> <area shape="rect" coords="0,0,100,50" href="home.html" alt="Home"> </map> <!-- Вторая карта --> <img src="products.png" usemap="#products-map"> <map name="products-map"> <area shape="poly" coords="..." href="product1.html"> </map>

Доступность:

  • Всегда добавляйте alt для элементов <area>
  • Предусмотрите текстовую альтернативу карте
  • Проверяйте с клавиатурной навигацией

JavaScript взаимодействие:

<img src="interactive.png" usemap="#interactive-map"> <map name="interactive-map"> <area shape="rect" coords="..." data-info="section1"> </map> <script> document.querySelector('map[name="interactive-map"] area') .addEventListener('click', function(e) { alert('Выбрана секция: ' + this.dataset.info); }); </script>

Примечание: Хотя карты изображений (<map>) все еще поддерживаются в HTML5, для сложных интерактивных областей рассмотрите использование SVG с элементами <a> или JavaScript-решений, которые обеспечивают лучшую гибкость и доступность.