This page was translated from English by the community. Learn more and join the MDN Web Docs community.
<map>
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since июль 2015 г..
HTML-элемент <map> используется с элементами <area> для определения карты изображения (интерактивной области ссылок).
Интерактивный пример
<map name="infographic">
<area
shape="poly"
coords="130,147,200,107,254,219,130,228"
href="https://developer.mozilla.org/docs/Web/HTML"
alt="HTML" />
<area
shape="poly"
coords="130,147,130,228,6,219,59,107"
href="https://developer.mozilla.org/docs/Web/CSS"
alt="CSS" />
<area
shape="poly"
coords="130,147,200,107,130,4,59,107"
href="https://developer.mozilla.org/docs/Web/JavaScript"
alt="JavaScript" />
</map>
<img
usemap="#infographic"
src="/shared-assets/images/examples/mdn-info2.png"
alt="MDN infographic" />
img {
display: block;
margin: 0 auto;
width: 260px;
height: 232px;
}
| Категории контента | Потоковый контент, фразовый контент, явный контент. |
|---|---|
| Допустимое содержимое | Любой прозрачный элемент. |
| Пропуск тегов | Нет, открывающий и закрывающий теги обязательны. |
| Допустимые родители | Любые элементы, которые принимают фразовый контент. |
| Допустимые ARIA-роли | Нет |
| DOM-интерфейс | HTMLMapElement |
Атрибуты
Элемент включает глобальные атрибуты.
name-
Атрибут name даёт карте имя, чтобы на неё можно было ссылаться. Атрибут должен быть определён и иметь не пустое значение без пробелов. Значение атрибута name не должно совпадать с регистром совместимости со значением атрибута name другого элемента карты в том же документе. Если также указан атрибут id, то они оба должны иметь одинаковое значение.
Пример
<map name="primary">
<area shape="circle" coords="75,75,75" href="left.html" />
<area shape="circle" coords="275,75,75" href="right.html" />
</map>
<img usemap="#primary" src="https://placehold.it/350x150" alt="350 x 150 pic" />
Живой пример
Ожидаемые выходные данные
Живой пример выше должен выглядеть как нижеследующее изображение (при использовании клавиши на клавиатуре):
Для ссылки left.html:
Для ссылки right.html:
Спецификации
| Specification |
|---|
| HTML # the-map-element |
Совместимость с браузерами
Enable JavaScript to view this browser compatibility table.