Тег HTML <area>

  • Предыдущая страница <applet>
  • Следующая страница <article>

Определение и использование

<area> Тег определяет область карты изображения (карта изображения - это изображение с интерактивной областью, то есть клиентская карта ответа).

<area> Элемент всегда включен в Тегвнутри.

Примечание:Элемент в атрибут и Элемент АтрибутСвязано, создает связь между изображением и картой.

См. также:

Руководство по HTML DOM:Объект области

Пример

Пример 1

Карта изображения с интерактивной областью:

<img src="life.png" alt="Жизнь" usemap="#lifemap" width="650" height="451">
<map name="lifemap">
  <area shape="rect" coords="10,208,155,338" alt="AirPods" href="airpods.html">
  <area shape="rect" coords="214,65,364,365" alt="iPhone" href="iphone.html">
  <area shape="circle" coords="570,291,75" alt="Кофе" href="coffee.html">
</map>

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

Пример 2

Другая карта изображения с интерактивной областью:

<img src="solarsystem.png" width="1024" height="576" alt="Планеты" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="0,0,114,576" alt="Sun" href="sun.html">
  <area shape="circle" coords="190,230,5" alt="Mercury" href="mercury.html">
  <area shape="circle" coords="228,230,5" alt="Venus" href="venus.html">
</map>

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

Атрибут

Атрибут Значение Описание
alt Текст Определяет альтернативный текст области. Обязателен, если присутствует атрибут href.
coords Значение координат Определяет координаты области.
download Имя файла Определяет целевой файл для загрузки при нажатии на гиперссылку.
href URL Определяет целевую область для гиперссылки.
hreflang Код языка Определяет язык целевого URL.
media Медиа-запросы Определяет медиа/устройство для оптимизации целевого URL.
referrerpolicy
  • no-referrer
  • no-referrer-when-downgrade
  • origin
  • origin-when-cross-origin
  • same-origin
  • strict-origin-when-cross-origin
  • unsafe-url
 Определяет информацию о ссылке, которая будет отправлена вместе с ссылкой.
rel
  • alternate
  • author
  • bookmark
  • help
  • license
  • next
  • nofollow
  • noreferrer
  • prefetch
  • prev
  • search
  • tag
 Определяет отношение текущего документа и целевого URL.
shape
  • default
  • rect
  • circle
  • poly
 Определяет форму области.
target
  • _blank
  • _parent
  • _self
  • _top
  • Название фрейма
 Определяет, где открывается целевой URL.
type Тип медиа Определяет тип медиа для целевого URL.

Глобальные атрибуты

<area> Тег также поддерживает Глобальные атрибуты в HTML.

событийные атрибуты

<area> Тег также поддерживает Событийные атрибуты в HTML.

Стандартные настройки CSS

Большинство браузеров будут отображать следующие значения по умолчанию <area> Элемент:

area {
  display: none;
{}

Поддержка браузеров

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Поддержка Поддержка Поддержка Поддержка Поддержка
  • Предыдущая страница <applet>
  • Следующая страница <article>