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

Описание

Атрибут id для тега <area> задаёт уникальный идентификатор области изображения-карты, который может использоваться для:

  • Связи с JavaScript и CSS
  • Программного управления областями
  • Доступности и тестирования
Пример использования:
<img src="interactive.png" usemap="#imagemap" alt="Интерактивное изображение"> <map name="imagemap"> <area id="main-btn" shape="rect" coords="0,0,100,50" href="#main" alt="Главная"> <area id="search-btn" shape="circle" coords="150,25,25" href="#search" alt="Поиск"> </map>

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

Характеристика Поведение
Уникальность Должен быть единственным в документе
Синтаксис Должен начинаться с буквы (A-Za-z)
CSS-доступ Можно обращаться через #id
JavaScript document.getElementById()
Производительность Самый быстрый способ выбора элементов

Практические применения:

<style> #main-btn { cursor: pointer; outline: 2px solid transparent; } #main-btn:focus { outline-color: blue; } </style> <script> document.getElementById('search-btn').addEventListener('click', function() { console.log('Search area clicked'); }); </script>

Рекомендации:

  • Используйте осмысленные имена (не "id1", "id2")
  • Избегайте кириллических символов в идентификаторах
  • Для стилизации предпочитайте классы
  • Проверяйте уникальность в документе
  • Используйте kebab-case (через дефис) для составных имен

Ограничения:

  • Не влияет на визуальное отображение области
  • Не заменяет атрибут name для image maps
  • Чувствителен к регистру (myArea ≠ MyArea)

Совет: Для сложных интерактивных карт используйте id вместе с data-атрибутами для хранения дополнительной информации.

Примечание: Хотя области image map не отображаются визуально, id остаётся важным инструментом для программируемого взаимодействия.