<area> HTML-элемент области карты-изображения

Элемент <area> HTML определяет область внутри карты-изображения, содержащую заранее заданные области, по которым можно щёлкнуть. Карта-изображение позволяет связывать геометрические области изображения с гипертекстовыми ссылками.

Этот элемент используется только внутри элемента <map>.

Попробуйте

<map name="infographic">
  <area
    shape="poly"
    coords="129,0,260,95,129,138"
    href="https://developer.mozilla.org/docs/Web/HTTP"
    alt="HTTP" />
  <area
    shape="poly"
    coords="260,96,209,249,130,138"
    href="https://developer.mozilla.org/docs/Web/HTML"
    alt="HTML" />
  <area
    shape="poly"
    coords="209,249,49,249,130,139"
    href="https://developer.mozilla.org/docs/Web/JavaScript"
    alt="JavaScript" />
  <area
    shape="poly"
    coords="48,249,0,96,129,138"
    href="https://developer.mozilla.org/docs/Web/API"
    alt="Web APIs" />
  <area
    shape="poly"
    coords="0,95,128,0,128,137"
    href="https://developer.mozilla.org/docs/Web/CSS"
    alt="CSS" />
</map>
<img
  usemap="#infographic"
  src="/shared-assets/images/examples/mdn-info.png"
  alt="MDN infographic" />

img {
  display: block;
  margin: 0 auto;
  width: 260px;
  height: 260px;
}

Атрибуты

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

alt

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

coords

Атрибут coords задаёт координаты атрибута shape, определяющего размер, форму и положение <area>. Этот атрибут нельзя использовать, если для shape задано значение default.

• rect: значение — x1,y1,x2,y2. Значение задаёт координаты верхнего левого и нижнего правого углов прямоугольника. Например, в <area shape="rect" coords="0,0,253,27" href="#" target="_blank" alt="Mozilla"> координаты 0,0 и 253,27 указывают соответственно на верхний левый и нижний правый углы прямоугольника.
• circle: значение — x,y,radius. Значение задаёт координаты центра окружности и её радиус. Например: <area shape="circle" coords="130,136,60" href="#" target="_blank" alt="MDN">
• poly: значение — x1,y1,x2,y2,..,xn,yn. Значение задаёт координаты вершин многоугольника. Если первая и последняя пары координат не совпадают, браузер добавит последнюю пару координат, чтобы замкнуть многоугольник

Значения — это числа в CSS-пикселях. Наш генератор фигур поможет создать синтаксис coords, позволяя выбирать точки на загруженном изображении.

download

Если этот атрибут задан, он указывает, что связанный ресурс предназначен для скачивания, а не для отображения в браузере. Полное описание атрибута download см. в разделе <a>.

href

Целевой адрес гиперссылки для области. Его значение — допустимый URL. Этот атрибут можно опустить; в таком случае элемент <area> не представляет собой гиперссылку.

interestfor

Определяет элемент <area> как инициатор интереса. Его значение — id целевого элемента, на который будет оказано некоторое воздействие (обычно он будет показан или скрыт), когда на элементе-инициаторе проявляют или теряют интерес (например, при наведении указателя или снятии наведения, фокусировке или потере фокуса). Подробнее и примеры см. в разделе Использование инициаторов интереса.

ping

Содержит список URL, разделённых пробелами. При переходе по гиперссылке браузер отправит на эти адреса в фоновом режиме запросы POST с телом PING. Обычно используется для отслеживания.

referrerpolicy

Строка, указывающая, какой реферер использовать при получении ресурса:

• no-referrer: заголовок Referer не будет отправлен.
• no-referrer-when-downgrade: заголовок Referer не будет отправлен источникам, не использующим TLS (HTTPS).
• origin: отправляемый реферер будет ограничен источником страницы-источника: её схемой, хостом и портом.
• origin-when-cross-origin: реферер, отправляемый другим источникам, будет ограничен схемой, хостом и портом. При переходах в пределах того же источника путь будет включён.
• same-origin: реферер будет отправлен для запросов к тому же источнику, но междоменные запросы не будут содержать сведений о реферере.
• strict-origin: отправлять только источник документа в качестве реферера, если уровень безопасности протокола остаётся прежним (HTTPS→HTTPS), но не отправлять его при переходе к менее защищённому назначению (HTTPS→HTTP).
• strict-origin-when-cross-origin (по умолчанию): отправлять полный URL при запросе к тому же источнику, отправлять только источник, если уровень безопасности протокола остаётся прежним (HTTPS→HTTPS), и не отправлять заголовок при переходе к менее защищённому назначению (HTTPS→HTTP).
• unsafe-url: реферер будет содержать источник и путь (но не фрагмент, пароль или имя пользователя). Это значение небезопасно, поскольку оно раскрывает источники и пути ресурсов, защищённых TLS, незащищённым источникам.

rel

Для ссылок, содержащих атрибут href, этот атрибут задаёт отношение целевого объекта к объекту ссылки. Значение — список типов ссылок, разделённых пробелами. Значения и их семантика регистрируются некоторым органом, который может иметь значение для автора документа. Если другое отношение не задано, используется значение по умолчанию — void. Используйте этот атрибут только при наличии атрибута href.

shape

Форма связанной активной области. Спецификации HTML определяют значения rect, задающее прямоугольную область; circle, задающее круглую область; poly, задающее многоугольник; и default, обозначающее всю область за пределами заданных фигур.

target

Ключевое слово или заданное автором имя контекста просмотра, в котором следует отобразить связанный ресурс. Следующие ключевые слова имеют особое значение:

• _self (по умолчанию): показать ресурс в текущем контексте просмотра.
• _blank: показать ресурс в новом безымянном контексте просмотра.
• _parent: показать ресурс в родительском контексте просмотра текущего, если текущая страница находится внутри фрейма. Если родительского контекста нет, действует так же, как _self.
• _top: показать ресурс в самом верхнем контексте просмотра (контексте просмотра, который является предком текущего и не имеет родителя). Если родительского контекста нет, действует так же, как _self.

Используйте этот атрибут только при наличии атрибута href.

Примечание: Установка target="_blank" для элементов <area> неявно обеспечивает такое же поведение rel, как при установке rel="noopener", которая не задаёт window.opener. Сведения о поддержке см. в разделе совместимость браузеров.

Примеры

Изображение с областями, по которым можно щёлкнуть

<map name="primary">
  <area
    shape="circle"
    coords="75,75,75"
    href="left.html"
    alt="Click to go Left" />
  <area
    shape="circle"
    coords="275,75,75"
    href="right.html"
    alt="Click to go Right" />
</map>
<img
  usemap="#primary"
  src="https://dummyimage.com/350x150"
  alt="350 x 150 pic" />

Техническая сводка

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

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