САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ

На сайте нет рекламы

HTML Тег <map>



Пример

Карта изображений с кликабельными областями:

<img src="workplace.jpg" alt="Рабочее место" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Компьютер" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Телефон" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Чашка кофе" href="coffee.htm">
</map>
Попробуйте сами »

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

Тег <map> используется для определения карты изображений. Карта изображений - это изображение с кликабельными областями.

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

Элемент <map> содержит ряд элементов, определяющих кликабельные области <area> на карте изображений.


Поддержка браузеров

Элемент
<map> Да Да Да Да Да


Атрибуты

Атрибут Значение Описание
name mapname Требуемый. Задает имя карты изображений

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

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


События атрибутов

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


Еще примеры

Пример

Еще одна карта изображений, с кликабельными областями:

<img src="planets.gif" width="145" height="126" alt="Планеты"
usemap="#planetmap">

<map name="planetmap">
 <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Солнце">
 <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Меркурий">
 <area shape="circle" coords="124,58,8" href="venus.htm" alt="Венера">
</map>
Попробуйте сами »

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

HTML DOM справочник: Объект map


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

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

map {
  display: inline;
}