<area>¶
Тег <area>
(от англ. area - область) определяет активные области изображения, которые являются ссылками.
Рисунок с привязанными к нему активными областями называется в совокупности картой-изображением. Такая карта по внешнему виду ничем не отличается от обычного изображения, но при этом оно может быть разбито на невидимые зоны разной формы, где каждая из областей служит ссылкой. Элемент <area>
задаёт форму области, её размеры, устанавливает адрес документа, на который следует сделать ссылку. <area>
всегда располагается в контейнере <map>
, который связывает координаты областей с изображением.
Несколько областей могут перекрывать друг друга, сверху будет та, которая в коде HTML располагается выше.
Изображения и мультимедиа
Синтаксис¶
<map>
<area href="адрес" />
</map>
Закрывающий тег не требуется.
Атрибуты¶
download
href
- Задаёт адрес документа, на который следует перейти.
hreflang
- Указывает язык документа, на который ведёт ссылка.
media
rel
shape
- Форма области.
target
- Имя фрейма, куда браузер будет загружать документ.
type
- Устанавливает MIME-тип документа, на который ведёт ссылка.
Также для этого элемента доступны универсальные атрибуты.
alt¶
Атрибут alt
устанавливает альтернативный текст для области изображения. Такой текст не отображается в браузере, но поисковые системы его могут прочитать.
Синтаксис
<area alt="<текст>" />
Значения
Любая подходящяя текстовая строка.
Значение по умолчанию
Нет.
coords¶
Атрибут coords
устанавливает координаты области, она также называется «горячая область». Такая область может быть ссылкой на файл или связана с действием, определяемым скриптом.
Значения координат представляют собой набор чисел, разделённых запятыми. Если две области перекрываются между собой, приоритет имеет та, которая определена в коде HTML выше.
Синтаксис
<area
coords="<координата 1>, <координата 2>, <координата 3>, ..."
/>
Значения
Набор координат определяется формой «горячей области», которая задается атрибутом shape
. Отсчёт координат обычно ведётся от левого верхнего угла изображения и указывается в пикселях.
Для прямоугольника (shape="rect"
) определяется четыре координаты — X1, Y1, X2, Y2, как показано на рис. 1.
Для окружности (shape="circle"
) определяется три координаты — координаты центра окружности (X, Y) и ее радиус (R), как показано на рис. 2.
Для полигона (многоугольника) (shape="poly"
) последовательно указываются координаты каждой вершины (X1, Y1, X2, Y2, :), как показано на рис. 3.
Значение по умолчанию
Нет.
href¶
Атрибут href
задаёт адрес документа, на который следует перейти. Поскольку в качестве адреса ссылки может использоваться документ любого типа, то результат перехода по ссылке зависит от конечного файла. Так, архивы (файлы с расширением zip или rar) будут сохраняться на локальный диск. По умолчанию новый документ загружается в текущую вкладку браузера, однако это поведение можно изменить с помощью атрибута target
.
Синтаксис
<area href="<адрес>" />
Значения
В качестве значения принимается полный или относительный путь к файлу, а также указатель на функцию JavaScript.
Значение по умолчанию
Нет.
hreflang¶
Атрибут hreflang
указывает язык документа, на который ведёт ссылка активной области изображения.
Синтаксис
<map>
<area href="<адрес>" hreflang="<язык>" />
</map>
Значения
Код языка
Значение по умолчанию
Нет.
shape¶
Атрибут shape
определяет форму «горячей области», координаты которой задаются с помощью атрибута coords
.
Синтаксис
<area shape="circle | default | poly | rect" />
Значения
circle
- Область в виде окружности.
default
- Указывает всю область.
poly
- Область в виде полигона (многоугольника).
rect
- Прямоугольная область.
Значение по умолчанию
rect
target¶
Атрибут target
определяет, как открывать ссылки — в новой вкладке, в текущей вкладке или в окне фрейма.
Синтаксис
<area target="<значение>" />
Значения
В качестве значения используется имя фрейма, заданное атрибутом name элемента <iframe>
. Если установлено несуществующее имя, то будет открыта новая вкладка. В качестве зарезервированных имён используются следующие.
_blank
- Загружает страницу в новую вкладку браузера.
_self
- Загружает страницу в текущую вкладку.
_parent
- Загружает страницу во фрейм-родитель; если фреймов нет, то это значение работает как
_self
. _top
- Отменяет все фреймы и загружает страницу в полном окне браузера; если фреймов нет, то это значение работает как
_self
.
Значение по умолчанию
_self
type¶
Атрибут type
устанавливает MIME-тип документа, на который ведёт ссылка. Этот атрибут носит рекомендательный характер и может использоваться для стилизации ссылок с заданным типом документа. Атрибут type
должен добавляться только при наличии атрибута href
.
Синтаксис
<area href="<адрес>" type="<MIME-тип>" />
Значения
MIME-тип
Значение по умолчанию
Нет.
Спецификации¶
Описание и примеры¶
<!DOCTYPE html>
<html>
<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="https://via.placeholder.com/640x158.png?text=xsltdev.ru"
width="640"
height="158"
alt="Детский образовательный центр"
/>
<br /><br />
<img
src="https://via.placeholder.com/640x30.png?text=xsltdev.ru"
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>
Ссылки¶
- Тег
<area>
MDN (рус.)