HTML тег <area>

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

Описание

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

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

Атрибуты

alt:

Определяет альтернативный текст, который будет виден вместо изображения, если оно не может быть отображено (из-за медленной связи, ошибки в атрибуте src и тд).

coords:

Атрибут coords указывает координаты активной области на карте-изображения. Он используется вместе с атрибутом shape для указания размера, формы и размещения активной области. Возможные значения атрибута:

x1,y1,x2,y2 - указывает координаты верхнего левого и правого нижнего угла прямоугольника (shape="rect").

Определение координат для прямоугольника (shape="rect"):
x,y,радиус - определяет координаты центра окружности и радиус (shape="circle").

Определение координат для окружности (shape="circle"):
x1,y1,x2,y2,...,xn,yn - определяет координаты вершин полигона (многоугольника) (shape="poly").

Определение координат для многоугольника (shape="poly"):

Примечание: координаты верхнего левого угла области - 0,0.

Пример »

href:

Атрибут href указывает адрес страницы, на которую ведет ссылка с активной области изображения, если он не указан или пропущен, то тег <area> не будет являться гиперссылкой. (адрес может быть либо абсолютным либо относительным)

hreflang:

Указывает двухбуквенный код языка, определяющий язык страницы, доступной по ссылке. Используется только совместно с атрибутом href и имеет исключительно информативный характер. Пример »

media:

Атрибут media определяет тип документа, на который ведет ссылка или указывает, тип устройства, для которого предназначается ссылка (пример: мобильный телефон, принтер и тд.).

Атрибут может принимать несколько значений и используется только совместно с атрибутом href.

rel:

Атрибут rel определяет отношение между текущим документом и связанным. Возможные значения атрибута:

alternate - ссылка на альтернативную версию документа (страница для печати, страница на другом языке и тд.).
author - ссылка на автора документа.
bookmark - постоянный URL-адрес, используемый для закладок.
help - ссылка на документ-справку.
license - ссылки на сведения об авторских правах для документа.
next - следующий документ в выделенной области.
nofollow - ссылка на неиндексируемый документ («nofollow» используется в Google, чтобы указать, что поисковый бот не должен переходить по этой ссылке).
noreferrer - указание браузеру не посылать HTTP-заголовок если пользователь перешел по ссылке.
prefetch - указывает, что следует кэшировать целевой документ.
prev - предыдущий документ в выделенной области.
search - ссылка на поиск для документа.
tag - тег (ключевое слово) для текущего документа.

Атрибут rel используется только совместно с атрибутом href. Пример »

shape:

Атрибут shape указывает форму области. Он используется совместно с атрибутом coords для указания размера, формы и размещения активной области. Возможные значения атрибута:

default - определяет весь регион.
rect - определяет прямоугольную область.
circle - определяет круглую область.
poly - определяет многоугольную область.

target:

Атрибут target определяет, где будет открыт документ, при переходе по ссылке. Используется только вместе с атрибутом href. Возможные значения атрибута:

_blank - открывает документ в новом окне или вкладке.
_parent - открывает документ в родительском фрейме.
_self - открывает документ в той же директории, где располагается ссылка (значение по умолчанию).
_top - открывает документ во всю ширину окна.
имя_фрейма - открывает документ в iframe, имя которого было указано в качестве значения.

Пример »

type:

Атрибут type указывает MIME-тип (спецификация форматирования сообщений и кодирования информации для передачи по интернету) документа, на который ведет ссылка. Используется только совместно с атрибутом href. Пример »

Примечание: атрибут usemap в теге <img> связан с атрибутом name элемента <map>, и создает связь между картинкой и картой.

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

Стиль по умолчанию

area {
    display: none;
}

Пример

<img src="image.png" width="104" height="96" alt="numbers" usemap="#num1">
<map name="num1">
  <area shape="rect" coords="3,2,55,47" href="#" alt="kubik1">
</map>
<p>Ссылка расположена на кубике 1, наведите курсор, чтобы убедиться</p>

Результат данного примера в окне браузера: