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

Baseline Широко доступно

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

Элемент <map> HTML используется вместе с элементами <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;
}

Атрибуты

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

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

Примеры

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

Нажмите на попугая слева, чтобы перейти к JavaScript, или на попугая справа, чтобы перейти к CSS.

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	WebView на iOS
`map`	1	12	1 ["До Firefox 5 в режиме Quirks пустые карты не пропускались в пользу непустых при сопоставлении.", "До Firefox 17 для HTML-элемента `<map>` по умолчанию применялся стиль `display: block;`. Теперь используется `display: inline;`, соответствующий поведению других браузеров. В режиме Quirks такое поведение было и раньше."]	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

См. также

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

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