Тег map HTML

HTML - тег <map> используется для указания карты-изображения с активными областями, по которым вы можете кликать, чтобы получить дополнительную информацию. Кликабельные области на карте изображения определяются с помощью тега <area>, вложенного в тег <map>.

Тег <map> - синтаксис и код

Тег <map> представлен парами. Содержимое записывается между открывающим (<map>) и закрывающим (</map>) тегами.

Попробуйте нажать на ноутбук, телефон или чашку кофе на изображении ниже:

★ Примечание: если вы просматриваете эту страницу на мобильном устройстве, переверните устройство в альбомную ориентацию, для просмотра примеров.

HTML код  для карты изображения выше:

<img src="/htm/workplace.png" alt="Workplace" usemap="#workmap">

<map name="workmap">
<area shape="rect" coords="33,10,250,247" alt="Ноутбук" href="/htm/notebook.htm">
<area shape="rect" coords="288,90,322,138" alt="Смартфон" href="/htm/smartphone.htm">
<area shape="circle" coords="336,188,37" alt="Кофе" href="/htm/coffee.htm">
</map>

Определение и использование

• HTML - тег <map> используется для определения карты изображения;
• Карта изображений — это изображение с кликабельными областями;
• Обязательный атрибут name элемента <map> связан с атрибутом usemap <img> и создает связь между изображением и картой;
• Элемент <map> содержит несколько элементов <area>, которые определяют кликабельные области на карте изображения.

Поддержка <map> браузерами

	✅ Поддерживает
	✅ Поддерживает
	✅ Поддерживает
	✅ Поддерживает
	✅ Поддерживает

Атрибуты

Глобальные атрибуты

Тег <map> также поддерживает глобальные атрибуты в HTML

Атрибуты событий

Тег <map> также поддерживает атрибуты событий в HTML

Связанные страницы

Руководство по HTML: карты изображений в HTML

Настройки CSS по умолчанию

Большинство браузеров будут отображать элемент map со следующими значениями по умолчанию:

map {
  display: inline;
}

Полный список всех доступных тегов HTML см. в Справочнике по тегам HTML.