HTML тег <area>

HTML теги

Значение и применение

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

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

ТегChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
<area>ДаДаДаДаДаДа

Атрибуты

АтрибутЗначениеОписание
alttextУказывает альтернативный текст для области. Если атрибут href присутствует, то является обязательным!.
coordscoordinatesУказывает координаты области.
downloadhtml5filenameУказывает, что файл будет загружен при клике на определённый участок.
hrefURLОпределяет гиперссылку на площади.
hreflanghtml5language_codeОпределяет язык целевой URL.
mediahtml5media queryУказывает, что целевая URL оптимизирована для определённых устройств.
nohrefvalueНе поддерживается в HTML5.
Указывает, что для данной области ссылка не задана.
relhtml5alternate
author
bookmark
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag
Указывает отношение между текущим документом и целевым URL.
shapedefault
rect
circle
poly
Указывает форму области.
target_blank
_parent
_self
_top
framename
Определяет, где открыть целевой URL.
typehtml5media_typeАтрибут определяет MIME-тип целевого URL.

Атрибутами тега <area> мы указываем как координаты области (атрибут coords), так и тип необходимой нам фигуры (атрибут shape):

Значение атрибута Определение
default Весь регион.
rect Прямоугольная область (x1,y1,x2,y2).
circle Круглая область (x,y,r- радиус).
poly Многоугольную область (x1,y1,x2,y2,...,xn,yn).

Создание активной области с использованием системы координат.
Создание активной области с использованием системы координат.

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

Давайте рассмотрим пример в котором при клике по определённой фигуре на одном рисунке происходит переход на разные веб-страницы, которые описывают эти фигуры (ссылки на Википедию):

<!DOCTYPE html>
<html>
<head>
<title>Пример использование тега <map></title>
</head>
	<body>
		<p>Выбери фигуру:</p>
		<img src = "map.png" usemap = "#figuri" alt = "Доступны 4 фигуры для выбора" >
		<map name = "figuri" >
			<area shape = "rect" coords = "25,25,125,125" href = "red.html" alt = "Красный квадрат" >
			<area shape = "circle" coords = "200,75,50" href = "green.html" alt = "Зелёный круг." >
			<area shape = "poly" coords = "325,25,262,125,388,125" href = "blue.html" alt = "Голубой треугольник" >
			<area shape = "poly" coords = "450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60"  href = "yellow.html" alt = "Желтая звезда" >
		</map>
	</body>
</html>

И так по порядку, что мы сделали в этом примере:


Обращаю Ваше внимание на то, что если у тега <area> используется атрибут href, который определяет гиперссылку на площади, то необходимо обязательно указывать атрибут alt (альтернативный текст для области).

В HTML5, если у элемента <map> указан глобальный атрибут id, то он должен иметь то же значение, что и атрибут name.


Результат нашего примера в браузере (кликабельно) и на изображении:

Доступные 4 фигуры для выбора Красный_квадрат Зелёный круг. Голубой треугольник Желтая звезда
Пример построения изображения-карты в HTML.
Пример построения изображения-карты в HTML.

Отличия HTML 4.01 от HTML 5

В HTML5, добавлено 5 новых атрибутов, атрибут nohref был удалён.

Значение CSS по умолчанию

area {
display: none;
}

Поддержка глобальных атрибутов

Элемент поддерживает "глобальные атрибуты".

Атрибуты событий

Элемент поддерживает "атрибуты событий".

HTML теги