<map>: Элемент карты изображения

Базовая линия Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с июля 2015 года.

Элемент <map> HTML используется с элементами <area>, чтобы определить карту изображения (область кликабельной ссылки).

Попробуйте

Атрибуты

Этот элемент включает глобальные атрибуты.

name: Атрибут name присваивает карте имя, чтобы её можно было сослаться. Атрибут должен быть присутствующим и иметь ненулевое значение без пробелов. Значение атрибута name не должно совпадать со значением атрибута name другого элемента <map> в том же документе. Если также указан атрибут id, оба атрибута должны иметь одинаковое значение.

Примеры

Карта изображения с двумя областями

Нажмите на попугая слева для JavaScript или на попугая справа для CSS.

HTML

html

<!-- Photo by Juliana e Mariana Amorim on Unsplash -->
<map name="primary">
  <area
    shape="circle"
    coords="75,75,75"
    href="https://developer.mozilla.org/docs/Web/JavaScript"
    target="_blank"
    alt="JavaScript" />
  <area
    shape="circle"
    coords="275,75,75"
    href="https://developer.mozilla.org/docs/Web/CSS"
    target="_blank"
    alt="CSS" />
</map>
<img
  usemap="#primary"
  src="parrots.jpg"
  alt="350 x 150 picture of two parrots" />

Результат

Техническое описание

Категории контента	Потоковый контент, контент фраз, наглядный контент.
Разрешённый контент	Любой прозрачный элемент.
Пропуск тега	Не допускается, обязательны как открывающий, так и закрывающий теги.
Разрешённые родительские элементы	Любой элемент, принимающий контент фраз.
Неявная ARIA роль	Нет соответствующей роли
Разрешённые ARIA роли	Не разрешены `role`
Интерфейс DOM	`HTMLMapElement`

Спецификации

Спецификация
Стандарт HTML # the-map-element

Совместимость с браузерами

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`map`	1	12	1 ["Перед Firefox 5, в режиме Quirks, пустые карты больше не пропускались в пользу непустых при сопоставлении.", "Перед Firefox 17, значение по умолчанию стилей HTML-элемента `<map>` было `display: block;`. Сейчас это `display: inline;` и соответствует поведению других браузеров. Это уже было так в режиме Quirks Mode."]	15	1	18	4	14	1	1.0	4.4
`name`	1	12	1	15	1	18	4	14	1	1.0	4.4

См. также

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map