HTML-тег map - Учебник HTML

HTML-тег <map> определяет клиентскую карту изображения — изображение, разные области которого ведут к разным адресатам. Вместо одной ссылки на всё изображение, вы размечаете несколько кликабельных «горячих точек» поверх него. Каждая горячая точка описывается элементом <area>, и все элементы <area> располагаются внутри одного <map>.

Такая карта называется клиентской, потому что браузер самостоятельно обрабатывает и отображает области локально — для определения того, на какую область был выполнен клик, не требуется обращения к серверу.

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

Как `<map>` связывается с изображением

<map> ничего не делает сам по себе. Он должен быть привязан к изображению через два атрибута, которые должны совпадать:

У <map>: атрибут name, например <map name="planets">.
У <img>: атрибут usemap, который ссылается на это имя с ведущим символом #, например <img usemap="#planets">.

<img src="planets.png" alt="The planets" usemap="#planets" />

<map name="planets">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.html" />
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercury.html" />
</map>

Правила привязки, которые следует помнить:

Префикс # требуется только для usemap. Значение name записывается без #; значение usemap записывается с ним (это ссылка на фрагмент). name="planets" ↔ usemap="#planets".
Значения чувствительны к регистру. usemap="#Planets" не совпадёт с name="planets".
name должен быть уникальным в документе и не может быть пустым.
Элементы <area> должны находиться внутри <map>. Элемент <area>, размещённый в другом месте, не имеет никакого эффекта.

Если имена не совпадают точно, изображение просто отображается без кликабельных областей, и никакая ошибка не показывается — это распространённая молчаливая ошибка.

Определение кликабельных областей с помощью `<area>`

Каждая область — это один элемент <area>. Два атрибута описывают её геометрию, остальные описывают ссылку:

Атрибут	Назначение
`shape`	Тип области: `rect`, `circle`, `poly` или `default`.
`coords`	Координаты, определяющие область, в пикселях CSS.
`href`	URL-адрес назначения области.
`alt`	Текстовая альтернатива для области (обязательна, когда указан `href`).
`target`	Где открывать ссылку (`_blank`, `_self` и т. д.).

Значение coords зависит от shape:

Форма	Формат `coords`	Значение
`rect`	`x1,y1,x2,y2`	Верхний левый и нижний правый углы прямоугольника.
`circle`	`x,y,r`	Центральная точка `x,y` и радиус `r`.
`poly`	`x1,y1,x2,y2,x3,y3,…`	Список точек, образующих многоугольник (каждая пара — одна вершина).
`default`	(нет)	Всё изображение, не покрытое другой областью.

Все координаты отсчитываются от верхнего левого угла изображения (0,0), в пикселях, относительно собственного размера изображения.

<map name="shapesmap">
  <!-- rectangle from (0,0) to (60,60) -->
  <area shape="rect" coords="0,0,60,60" alt="Square region" href="square.html" />
  <!-- circle centered at (120,30) with radius 25 -->
  <area shape="circle" coords="120,30,25" alt="Round region" href="circle.html" />
  <!-- triangle through three points -->
  <area shape="poly" coords="160,0,200,60,120,60" alt="Triangle region" href="triangle.html" />
</map>

Синтаксис

Тег <map> используется парами. Содержимое записывается между открывающим (<map>) и закрывающим (</map>) тегами.

Пример HTML-тега `<map>`:

HTML-тег <map>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Click on the logo or on one of the logo items to watch it closer:</p>
    <img src="/uploads/media/default/0001/01/0f94cf189afcdc39c4df2a73d230d1a7425ee66d.png"  width="145" height="126" alt="block" usemap="#blockmap" />
    <map name="blockmap">
      <area shape="circle" coords="45,58,30" alt="html-book" href="https://www.w3docs.com/learn-html.html" />
      <area shape="circle" coords="88,64,15" alt="html-quiz" href="https://www.w3docs.com/quiz-start/html-basic" />
      <area shape="circle" coords="114,67,14" alt="html-snippets" href="https://www.w3docs.com/snippets/html.html" />
    </map>
  </body>
</html>

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

Атрибуты

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

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

Доступность

Карты изображений являются полностью визуальными, если вы специально не позаботитесь об обратном, поэтому важны несколько правил:

Каждый связанный <area> должен иметь значимый alt. Программы чтения с экрана объявляют каждую область по её тексту alt, точно так же, как они делают это для ссылок. Пустой или отсутствующий alt у кликабельной области оставляет ссылку без метки.
alt должен описывать назначение, а не изображение. «Открыть страницу контактов» полезнее, чем «синий круг».
Навигация с клавиатуры работает автоматически для областей, имеющих href: каждая становится фокусируемой, доступной по Tab ссылкой. Избегайте размещения интерактивности только в области без href, так как она будет недоступна с клавиатуры.
Не полагайтесь на крошечные горячие точки. Маленькие или необычно сформированные области трудно попасть мышью, касанием или вспомогательным указателем.

Когда использовать (и когда не стоит)

Клиентские карты изображений — это старая функция, и они по-прежнему работают, но сегодня они подходят лишь для узкого круга случаев.

Разумное применение: единственное растровое изображение (фотография, диаграмма, отсканированный план этажа), где несколько прямоугольных или круговых областей должны ссылаться куда-либо, и изображение не будет масштабироваться адаптивно.

Избегайте <map>, когда:

Макет является адаптивным. Значения coords — это фиксированные пиксельные значения, привязанные к собственному размеру изображения; они не масштабируются при изменении размера изображения с помощью CSS, поэтому горячие точки сдвигаются со своих мест.
Области являются кнопками, меню или чем-то сложным. Создавайте их с помощью настоящего HTML/CSS.

Для большинства современных задач существуют лучшие альтернативы:

Наложение якорей с помощью CSS — размещайте абсолютно позиционированные элементы <a> (в процентах) поверх адаптивного изображения. Это правильно масштабируется и полностью доступно.
Встроенный <svg> — рисуйте фигуры как настоящие, масштабируемые, стилизуемые элементы и оборачивайте каждую кликабельную фигуру в <a>. Это наиболее гибкий вариант для диаграмм и сложных областей.

Смотрите также Ссылки HTML, чтобы узнать, как ведут себя якоря и цели ссылок.

Практика

Что верно о HTML-теге <map>, описанном на связанной веб-странице?

HTML-тег <map> используется для создания карты изображения.Тег <map> не поддерживается в HTML5.Тег <map> определяет клиентскую карту изображения. Карта изображения — это изображение с кликабельными областями.Тег <map> не может использоваться с элементами <area> для определения кликабельных областей в карте изображения.Элемент <map> не содержит одного или нескольких элементов <area>, которые определяют кликабельные области в карте изображения.

Как <map> связывается с изображением

Определение кликабельных областей с помощью <area>