HTML тег <area>

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

Синтаксис

<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>

<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>

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