<area>

Каждый элемент <area> (от англ. area — область, регион) определяет активные области изображения, которые являются ссылками. Рисунок с привязанными к нему активными областями называется в совокупности картой-изображением. Такая карта по внешнему виду ничем не отличается от обычного изображения, но при этом оно может быть разбито на невидимые зоны разной формы, где каждая из областей служит ссылкой. Элемент <area> задаёт форму области, её размеры, устанавливает адрес документа, на который следует сделать ссылку. <area> всегда располагается в контейнере <map>, который связывает координаты областей с изображением.

Несколько областей могут перекрывать друг друга, сверху будет та, которая в коде HTML располагается выше.

Синтаксис

<map>
  <area href="<адрес>">
</map>

Атрибуты

alt
Альтернативный текст для области изображения.
coords
Координаты активной области.
download
Предлагает скачать указанный по ссылке файл.
href
Задаёт адрес документа, на который следует перейти.
ping
Указывает адрес, по которому, при переходе по ссылке, браузер отправляет POST-запрос, содержащий адрес ссылки, данные браузера и другую информацию.
referrerpolicy
Определяет, какие реферальные данные следует отправлять при переходе по ссылке в заголовке Referer.
shape
Форма области.
target
Определяет, как открывать ссылки — в новой вкладке, в текущей вкладке или в окне фрейма.

Также для этого элемента доступны универсальные атрибуты и события.

Устаревшие атрибуты

hreflang
Указывает язык документа, на который ведёт ссылка.
nohref
Область без ссылки на другой документ.
type
Устанавливает MIME-тип документа, на который ведёт ссылка.

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

Добавлять к элементам HTML устаревшие атрибуты не надо, взамен применяются стили или другие элементы HTML.

Пример

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>AREA</title> <style> #title { line-height: 0; /* Изменяем межстрочное расстояние */ } #title img { border: none; /* Убираем рамку вокруг изображения */ } </style> </head> <body> <div id="title"><img src="image/ecctitle.png" width="640" height="158" alt="Детский образовательный центр"><br> <img src="image/navigate.png" width="640" height="30" alt="Навигация по сайту" usemap="#Navigation"></div> <p><map name="Navigation"> <area shape="poly" coords="113,24,211,24,233,0,137,0" href="page/inform.html" alt="Информация"> <area shape="poly" coords="210,24,233,0,329,0,307,24" href="page/activity.html" alt="Мероприятия"> <area shape="poly" coords="304,24,385,24,407,0,329,0" href="page/depart.html" alt="Отделения"> <area shape="poly" coords="384,24,449,24,473,0,406,0" href="page/techinfo.html" alt="Техническая информация"> <area shape="poly" coords="449,24,501,24,525,0,473,0" href="page/study.html" alt="Обучение"> <area shape="poly" coords="501,24,560,24,583,0,525,0" href="page/work.html" alt="Работа"> <area shape="poly" coords="560,24,615,24,639,0,585,0" href="page/misk.html" alt="Разное"> </map></p> </body> </html>

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

Спецификация Статус
HTML Living Standard Живой стандарт
HTML 4.01 Specification Заменённая рекомендация

Браузеры

3 12 1 15 1 1
4.4 4 14 1

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузреа, начиная с которой элемент поддерживается.