HTML тег `<map>`

Значение и применение

Тег <map> используется для определения изображения-карты. Изображение-карта представляет собой изображение с определённой активной областью. Элемент <map> содержит ряд <area> тегов, которые определяют интерактивные области в изображении-карте, т.е. при клике на определённую область изображения происходят определённые действия, например, открывается отдельная страница с описанием данного участка изображения.

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

Спецификация: multipage

Поддерживается во всех основных браузерах с 2015 года.

ВсеКомпьютерыМобильные

Совместимостьhtml.elements.map
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`map`	✓1	✓12	✓1	✓15	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
`name`	✓1	✓12	✓1	✓15	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

Атрибуты

Атрибут	Значение	Описание
`name`	`mapname`	Задаёт имя карте-изображению. Является обязательным атрибутом, он связан с атрибутом `usemap` элемента `<img>` (создает связь между изображением и картой).

Атрибутами тега <area> мы указываем как координаты области (атрибут coords), так и тип необходимой нам фигуры (атрибут shape):

Значение атрибута	Определение
`default`	Весь регион.
`rect`	Прямоугольная область (x1,y1,x2,y2).
`circle`	Круглая область (x,y,r- радиус).
`poly`	Многоугольную область (x1,y1,x2,y2,...,xn,yn).

Создание активной области с использованием системы координат.

Примеры, попробуйте сами

Карта изображения

Измените координаты областей. Для переходов скачайте HTML. На узком экране изображение прокручивается, чтобы сохранить исходные координаты.

base.css

CSS

/* Сохраняем координаты карты: широкое изображение прокручивается без масштабирования. */
.map-stage {
    overflow: auto;
}

index.html

HTML

<div class="map-stage">
  <img src="assets/map.png" width="520" height="150" usemap="#shapes" alt="Квадрат, круг, треугольник и звезда" />
</div>
<map name="shapes"
  ><area shape="rect" coords="25,25,125,125" href="#square" alt="Квадрат" /><area
    shape="circle"
    coords="200,75,50"
    href="#circle"
    alt="Круг"
/></map>
<p id="square">Раздел о квадрате.</p>
<p id="circle">Раздел о круге.</p>

Отличия HTML 4.01 от HTML 5

В HTML5, если у элемента указан глобальный атрибут id, то он должен иметь то же значение, что и атрибут name.

Значение CSS по умолчанию

CSS

map {
display: inline;
}

Поддержка глобальных атрибутов

Элемент поддерживает "глобальные атрибуты".

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

Элемент поддерживает "атрибуты событий".

HTML тег <map>