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

Описание

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

Пример использования:
<img src="world-map.png" alt="Карта мира" usemap="#worldmap"> <map id="worldmap"> <area shape="rect" coords="34,44,270,350" alt="Северная Америка" href="north-america.html"> <area shape="circle" coords="337,300,44" alt="Южная Америка" href="south-america.html"> <area shape="poly" coords="488,84,581,79,598,221,505,228" alt="Европа" href="europe.html"> </map>

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

Элемент Роль атрибута id
<map> Создает уникальный идентификатор для карты изображения
<img> Связывает изображение с картой через usemap="#id"

Рекомендации по использованию:

  • Используйте осмысленные имена ID (например, #main-nav-map вместо #map1)
  • Убедитесь, что ID уникален в пределах страницы
  • Для сложных изображений используйте инструменты для генерации координат
  • Всегда добавляйте альтернативный текст в теги <area>

Пример с CSS-стилизацией активных областей:

<style> area { outline: 2px dashed transparent; transition: outline-color 0.3s; } area:hover { outline-color: rgba(255,0,0,0.5); } </style> <img src="interface.png" alt="Интерфейс" usemap="#interface-map"> <map id="interface-map"> <area shape="rect" coords="10,20,110,60" alt="Кнопка входа" href="#login"> <area shape="circle" coords="200,100,30" alt="Поиск" href="#search"> </map>

Ограничения и совместимость:

  • Поддерживается всеми браузерами
  • Для адаптивных изображений потребуется JavaScript для пересчета координат
  • Не забывайте указывать атрибут alt для доступности
  • Избегайте слишком большого количества областей - это усложняет навигацию

Примечание: Атрибут id для <map> обязателен для создания работающей карты изображения. Для адаптивных сайтов рассмотрите использование SVG-карт или JavaScript-решений, которые автоматически пересчитывают координаты при изменении размера изображения.