HTML тег <area>

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

Примечание: Элемент <area> всегда располагается в контейнере <map>, который связывает координаты областей с изображением.

Примечание: В случае если активные области элемента наслаиваются друг на друга, то при нажатии кнопки мыши на элемент будет активирована та область, которая в коде HTML располагается выше.

Синтаксис

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

Закрывающий тег

Не требуется.

Атрибуты

alt
Альтернативный текст для области изображения.
coords
Координаты активной области.
download HTML5
Сообщает о том, что эта ссылка должна быть использована для скачивания файла, и, когда пользователь нажимает на ссылку, ему будет предложено сохранить файл как локальный.
href
Задаёт адрес документа, на который следует перейти.
hreflangHTML5
Указывает язык документа, на который ведёт ссылка. Допустимые значения определяются BCP47. Используйте этот атрибут только в том случае, если присутствует атрибут href.
nohrefHTML 4 Устарел в HTML5
Область без ссылки на другой документ.
rel
Определяет связь между текущим документом и целевым URL-адресом.
shape
Форма области.
target
Имя фрейма, куда браузер будет загружать документ.
typeHTML5
Определяет MIME-тип для документа по ссылке. Обычно используется как контрольная информация.

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

Стилизация по умолчанию

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

area { 
    display: none;
}

Различия между HTML 4.01 и HTML5

В HTML5 добавилось несколько новых атрибутов, а в HTML 4.01 есть атрибуты, которые больше не поддерживается.

Пример использования:

Элемент <area>

Пример HTML:

Попробуй сам
<img src="images/foto_elem.jpg" alt="Карта изображений" style="width:450px;height:292px;" usemap="#mykarta">
<map name="mykarta"> 
  <area shape="rect" coords="133,163,414,252" 
  title="Зажигалка" href="javascript:alert('Это прямоугольная ссылка');"> 
  <area shape="circle"" coords="58,158,40" 
  title="Монета" href="javascript:alert('Вы выбрали круг');"> 
  <area shape="poly" coords="133,62,278,59,284,24,407,22,410,130,285,134,278,96,133,95" 
  title="Ключ от авто" href="images/auto500.jpg" target=_blank> 
</map>

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

Спецификация Статус
Current W3C Draft Текущий проект
WHATWG HTML Living Standard (WHATWG) Живой стандарт
HTML5 (W3C) Рекомендация
HTML 4.01 (W3C) Рекомендация

Поддержка браузерами



Contema