Тег <area>
Синтаксис
<map name="...">
<area shape="..." coords="..." href="..." alt="...">
</map>
<img src="..." usemap="...">
Описание
Тег <area> (от англ. area — область, регион) определяет интерактивную область в изображении-карте. При клике на определённую область изображения происходят определённые действия.
Необходимо использовать тег <img> и его атрибут usemap, так как он связан с тегом <map> атрибутом name и создает связь между изображением и картой.
Тег <area> не нужно закрывать.
Внимание!
Элемент <area> всегда должен быть вложен в тег <map>.
Атрибуты, которые можно использовать в теге <area>, указаны ниже. Также тег поддерживает и глобальные атрибуты.
Атрибуты
| Атрибут | Значение | Описание |
| accesskey | символ | Переход к области с помощью комбинации клавиш |
| alt | text | Альтернативный текст для области. Обязателен, если присутствует атрибут href |
| coords | coordinates | Координаты области |
| download | filename | Указывает, что целевой объект будет загружен, когда пользователь нажмет на гиперссылку |
| href |
URL-адрес |
Целевой объект гиперссылки для области |
| hreflang | код языка | Указывает язык связанного документа |
| media | media_query | Указывает, какие носители/устройства оптимизированы для связанного документа |
| nohref | значение | Устарел. Указывает, что в области отсутствует связанная ссылка |
| referrerpolicy | значение | Строка, указывающая, какой реферер использовать при извлечении ресурса |
| rel | alternate author bookmark help license next nofollow noreferrer prefetch prev search tag |
Указывает связь между текущим документом и связанным документом |
| rev | text | Устарел. Указывает связь между связанным документом и текущим документом |
| shape | default rect circle poly |
Задает форму области ссылки |
| tabindex | value | Числовое значение, указывающее положение определенной области в порядке перехода в браузере |
| target | _blank _parent _self _top framename |
Указывает, где открыть связанный документ |
| type | media_type | Указывает тип носителя связанного документа |
Пример
HTML-код:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Тег area</title>
</head>
<body>
<img src="figures.png" usemap="#figures">
<map name="figures">
<area shape="rect" coords="25,25,125,125" href="https://ru.wikipedia.org/wiki/Квадрат" target="_blank" alt="красный квадрат">
<area shape="circle" coords="200,75,50" href="https://ru.wikipedia.org/wiki/Круг" target="_blank" alt="зеленый круг">
<area shape="poly" coords="325,25,262,125,388,125" href="https://ru.wikipedia.org/wiki/Треугольник" target="_blank" alt=" синий треугольник">
<area shape="poly" coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60" href="https://ru.wikipedia.org/wiki/Звезда_(геометрия)" target="_blank" alt="желтая звезда">
</map>
</body>
</html>
Отображение в браузере:
Параметры CSS по умолчанию
area {
display: none;
}
Поддержка браузера
|
Элемент |
Chrome |
Opera |
Firefox |
Safari |
Microsoft Edge |
| <area> | Да | Да | Да | Да | Да |
