Тег <map>
Описание
Тег <map> создает кликабельную карту-изображение (image map), определяя активные области на изображении через дочерние элементы <area>. Работает в связке с атрибутом usemap тега <img>.
<img
src="world-map.png"
alt="Карта мира"
usemap="#worldmap">
<map name="worldmap">
<area shape="circle" coords="250,150,50"
href="europe.html" alt="Европа">
<area shape="rect" coords="400,100,500,200"
href="asia.html" alt="Азия">
<area shape="poly" coords="350,300,400,350,300,400"
href="africa.html" alt="Африка">
</map>
Рекомендации по использованию:
- Всегда добавляйте alt-текст для каждой области
- Для сложных форм используйте полигоны (poly)
- Проверяйте доступность с отключенными изображениями
- Альтернатива - CSS-спрайты с
position:absolute - Для адаптивности используйте JavaScript-пересчет координат
Тег <map> позволяет создавать интерактивные зоны на изображениях, хотя для сложных интерактивных решений сегодня чаще используют SVG или Canvas.
Атрибуты
| name | Имя карты изображения для связи с usemap |
| accesskey | Горячая клавиша для активации элемента |
| class | CSS-классы для стилизации элемента |
| contenteditable | Разрешает редактирование содержимого |
| data-* | Пользовательские данные элемента |
| dir | Направление текста (ltr|rtl) |
| hidden | Скрывает элемент от отображения |
| id | Уникальный идентификатор элемента |
| lang | Язык содержимого элемента |
| spellcheck | Включает проверку орфографии |
| style | Инлайновые CSS-стили элемента |
| tabindex | Порядок перехода при навигации по Tab |
| title | Всплывающая подсказка для элемента |
| translate | Определяет возможность перевода содержимого |
Поддержка браузерами
 |
 |
 |
 |
 |
|---|---|---|---|---|
| 3.0 | 1.0 | 4.0 | 1.0 | 1.0 |