HTML-тег: area

HTML-тег area задаёт область карты изображения. Используется в сочетании с map для отображения ссылок на определённые области изображения.

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

Рисунок с активными областями называется картой-изображением. Такая карта выглядит как обычное изображение. Изображение разбивается на невидимые зоны разной формы. Каждая область служит ссылкой.

Тег задаёт форму области, её размеры, адрес документа, на который будет вести ссылка, имя окна или фрейма, в котором будет загружен документ. Этот тег всегда располагается в контейнере.

Он связывает координаты областей с изображением.Элемент area не содержит содержимого и, следовательно, не имеет закрывающий тег.

Необязательные атрибуты

alt

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

shape

Атрибут: shape.
Описание: форма области.
Возможные значения:
rect ─ прямоугольник. Это значение по умолчанию, если атрибут shape опущен.
circle ─ круг.
Poly ─ полигон.
default ─ область становится областью всего изображения.

coords

Атрибут: coords.
Описание: пиксельные координаты области и её форма.
Возможные значения:
Для прямоугольных фигур это разделённый запятыми список из четырёх значений для left, top, right и bottom (например. coords=»0,0,50,50″).
Для круглых фигур это разделённый запятыми список из трёх значений для left, top и radius (например. coords=»50,50,25″).
Для многоугольных фигур это разделённый запятыми список, содержащий чётное количество значений, указывающих левую и верхнюю части каждой точки фигуры (например. coords=»0,0,25,25,50,25,50,100″).

href

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

rel

Атрибут: rel.
Описание: используется с href. Взаимосвязь между страницей ссылки и целевым назначением ссылки.
Возможные значения:
alternate ─ альтернативная версия текущей веб-страницы.
author ─ страница, содержащая сведения об авторе страницы / статьи.
bookmark ─ ссылка на текущий раздел страницы.
help ─ справка, специфичная для контекста.
license ─ лицензия на авторское право для текущего документа.
next ─ указывает, что страница находится в последовательности, а связанная страница является следующей страницей в последовательности.
nofollow ─ указывает, что связанный ресурс не одобрен автором текущего документа.
noreferrer ─ указывает браузеру не отправлять заголовок HTTP referrer при переходе по ссылке.
prefetch ─ связанный ресурс должен быть кэширован.
prev ─ указывает, что страница находится в последовательности, а связанная страница является предыдущей страницей в последовательности.
search ─ средство поиска, которое можно использовать для поиска по текущим и связанным документам.
tag ─ термин для пометки (не путать с HTML-тегами), который применяется к ссылке.

hreflang

Атрибут: hreflang.
Описание: используется с href. Язык цели ссылки.
Возможные значения: код языка, такой как en (английский) или es (испанский).

type

Атрибут: type.
Описание: используется с href. Тип MIME связанного ресурса.
Возможные значения: текст.

download

Атрибут: download.
Описание: используется с href. Указывает, что целевую ссылку следует загружать, а не переходить по ней.
Возможные значения: нет.

target

Атрибут: target.
Описание: используется с href. Контекст просмотра, в котором должно открыться целевое назначение.
Возможные значения:
_self ─ открывает ссылку в текущем окне / вкладке.
_blank ─ открывает ссылку в новом окне / вкладке.

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

Пример

<map name="atlas">
    <area shape="rect" coords="0,0,115,90" href ="northamerica.html" alt="North America">
    <area shape="poly" coords="113,39,187,21,180,72,141,77,117,86" href="europe.html" alt="Europe">
    <area shape="poly" coords="119,80,162,82,175,102,183,102,175,148,122,146" href="africa.html" alt="Africa">
</map>

Страницы в тему:

HTML-тег: map
HTML-тег: img
HTML-тег: a

Все HTML-теги

a abbr address area article aside audio b base bdi bdo blockquote body br button canvas caption cite code col colgroup data datalist dd del dfn div dl dt em embed fieldset figcaption figure footer form h1 — h6 head header hr html i iframe img input ins kbd keygen label legend li link main map mark meta meter nav noscript object ol optgroup option output p param pre progress q rb rp rt rtc ruby s samp script section select small source span strong style sub sup table tbody td template textarea tfoot th thead time title tr track u ul var video wbr