HTML - тег <area> идентифицирует активные области (координаты, форму, размер и т. д.) изображения-карты, определяемые тегом <map>. При нажатии на активную область изображения происходит определенное действие, например, переход на страницу с подробной информацией.
Тег <area> - синтаксис и код
<area> — пустой тег, что означает, что закрывающий тег не требуется. Но в XHTML тег (<area>) должен быть закрыт (<area/>).
Нажмите на компьютер, телефон или чашку кофе, чтобы перейти на новую страницу и прочитать больше по теме:
★ Примечание: если вы просматриваете эту страницу на мобильном устройстве, переверните устройство в альбомную ориентацию, для просмотра примеров.
Карта изображения с кликабельными областями:
<img src="/htm/workplace.png" alt="Workplace" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="33,10,250,247" alt="Ноутбук" href="/htm/notebook.htm">
<area shape="rect" coords="288,90,322,138" alt="Смартфон" href="/htm/smartphone.htm">
<area shape="circle" coords="336,188,37" alt="Кофе" href="/htm/coffee.htm">
</map>
Определение и использование
- HTML - тег
<area> определяет область внутри карты изображения (карта изображения — это изображение с интерактивными областями);
- Элементы
<area> всегда вложены внутри тега <map>.
★
Примечание: атрибут usemap в
<img> связан с атрибутом имени элемента
<map> и создает связь между изображением и картой.
Поддержка <area> браузерами
 |
Поддерживает |
 |
Поддерживает |
 |
Поддерживает |
 |
Поддерживает |
 |
Поддерживает |
Атрибуты
| Атрибут |
Значение |
Описание |
| alt |
text |
Задает альтернативный текст для области. Требуется, если присутствует атрибут href |
| coords |
coordinates |
Указывает координаты области |
| download |
filename |
Указывает, что целевой объект будет загружен, когда пользователь нажмет на гиперссылку |
| href |
URL |
Указывает цель гиперссылки для области |
| hreflang |
language_code |
Указывает язык целевого URL-адреса |
| media |
media query |
Указывает, для какого носителя/устройства оптимизирован целевой URL-адрес |
| referrerpolicy |
no-referrer
no-referrer-when-downgrade
origin
origin-when-cross-origin
same-origin
strict-origin-when-cross-origin
unsafe-url |
Указывает, какую информацию о реферере отправлять вместе со ссылкой |
| rel |
alternate
author
bookmark
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag |
Указывает связь между текущим документом и целевым URL-адресом |
| shape |
default
rect
circle
poly |
Определяет форму области |
| target |
_blank
_parent
_self
_top
framename |
Указывает, где открыть целевой URL-адрес |
| type |
media_type |
Указывает тип носителя целевого URL-адреса |
Глобальные атрибуты
Тег <area> также поддерживает глобальные атрибуты в HTML
Атрибуты событий
Тег <area> также поддерживает атрибуты событий в HTML
Связанные страницы
Руководство по HTML: карты изображений в HTML
Настройки CSS по умолчанию
Большинство браузеров будут отображать элемент area со следующими значениями по умолчанию:
Полный список всех доступных тегов HTML см. в Справочнике по тегам HTML.
