Тег area (от английского area, «область») описывает одну активную область картинки-карты: прямоугольник, круг или многоугольник, который работает как ссылка. Клик по такой области открывает адрес, а остальная часть картинки остаётся обычной. Тег записывают только внутри тега map, а саму картинку подключают атрибутом usemap.
Дальше разобраны атрибуты, формы shape и координаты coords, адрес и описание, перекрытие областей, target и download, оформление, работа из JavaScript и причины, по которым область не срабатывает. Другие теги группы собраны в шпаргалке по тегам.
<img src="rooms.png" usemap="#rooms" alt="План квартиры">
<map name="rooms">
<area shape="rect" coords="0,0,100,100" href="kitchen.html"
alt="Кухня">
<area shape="circle" coords="150,50,40" href="hall.html"
alt="Прихожая">
</map>В этой статье
- Тег area в HTML: что это и для чего нужен
- Атрибуты тега area: shape, coords, href, alt и другие
- Атрибут shape тега area: rect, circle, poly и default
- Атрибут coords тега area: координаты для каждой формы
- Атрибуты href и alt тега area: адрес и описание области
- Перекрытие областей тега area: какая область сработает
- Атрибуты target и download тега area: куда вести и что скачать
- Тег area и CSS: оформление, фокус и клавиатура
- Тег area в JavaScript: свойства и события
- Почему тег area не работает
Тег area в HTML: что это и для чего нужен
Сначала о том, чем area отличается от остальных тегов карты и что у него есть, а чего нет.
Тег area пустой (одиночный): содержимого и закрывающего тега у него нет. Запись </area> браузер пропускает: две области с закрывающими тегами остаются двумя областями, лишних элементов не появляется. Поэтому в разметке пишут только открывающий тег.
У area нет собственной видимой части. Свойство display у него inline, но размер на странице 0 на 0 пикселей: форма области берётся только из shape и coords. Зато ведёт он себя как ссылка: область получает фокус клавишей Tab, открывает адрес по Enter и откликается на мышь.
Работает area только внутри map. Область, перенесённая из карты в тело страницы, на клики не отвечает: клик получает картинка.
| Тег | Что делает |
|---|---|
| img | Показывает картинку и по атрибуту usemap находит карту |
| map | Хранит карту под названием name и области внутри неё |
area | Описывает одну область: форму, координаты, адрес и описание |
Атрибуты тега area: shape, coords, href, alt и другие
У area девять собственных атрибутов: форму задают shape и coords, адрес и описание добавляют href и alt, а остальные настраивают переход.
| Атрибут | Что делает | Пример |
|---|---|---|
shape | Форма области: rect, circle, poly или default | shape="circle" |
coords | Координаты области в пикселях картинки | coords="0,0,100,100" |
href | Адрес, который открывается по клику. Без него область не ссылка | href="kitchen.html" |
alt | Текстовое описание области. Нужно, если есть href | alt="Кухня" |
target | Где открыть адрес | target="_blank" |
download | Скачать файл вместо перехода | download="plan.pdf" |
rel | Связь с адресом, например nofollow | rel="nofollow" |
ping | Адреса для уведомления о клике | ping="/count" |
referrerpolicy | Что передать в заголовке Referer | referrerpolicy="no-referrer" |
Общие атрибуты (id, class, title, tabindex) тоже допустимы. Атрибута usemap у area нет: его записывают у картинки. Устаревший nohref не нужен: область без href и так не считается ссылкой.
Атрибут shape тега area: rect, circle, poly и default
Атрибут shape выбирает форму области, а числа для неё записывают в coords.
Значение shape | Форма | Числа в coords | Пример |
|---|---|---|---|
rect | Прямоугольник | Четыре: левый верхний и правый нижний углы | coords="20,15,100,85" |
circle | Круг | Три: центр и радиус | coords="90,50,40" |
poly | Многоугольник | Не меньше шести: пары чисел для вершин | coords="90,10,150,90,30,90" |
default | Вся картинка | Не нужны | <area shape="default" href="all.html"> |
Если shape не записан, область считается прямоугольником. Так же читается неизвестное значение, например shape="square". Регистр не важен: RECT и Default работают. Старые записи rectangle, circ и polygon браузер тоже понимает, но в разметке пишут rect, circle и poly.
Пример: атрибут shape тега area: rect, circle, poly и default
Кнопки меняют область. Закрашено то место, где браузер принимает клик за клик по area. Кликните по картинке: строки показывают точку клика и результат. В последнем варианте default записан первым, но коралловым закрашен только вне синего rect.
В браузере значение default работает как запасная область: оно срабатывает только там, где нет других областей, даже если записано первым. Так весь остаток картинки можно отправить на общую страницу. Надёжнее всё же записывать default последним, чтобы результат не зависел от браузера.
Атрибут coords тега area: координаты для каждой формы
Координаты в coords записывают в пикселях картинки: начало слева вверху, x растёт вправо, y вниз.
Для rect числа идут в порядке x1,y1,x2,y2, для circle порядок x,y,r, для poly пары x1,y1,x2,y2,x3,y3 и дальше. Многоугольник замыкается сам: последнюю вершину с первой соединять не нужно. Разделитель по стандарту один: запятая. Пробелы и точки с запятой браузер тоже понимает, но писать надо запятые.
Числа не масштабируются вместе с картинкой: если картинку растянули, область остаётся прежней. Как пересчитать координаты, показано в разделе про адаптивную картинку.
Координаты точки удобно читать прямо по клику. У клика по области offsetX отсчитывается не от картинки, поэтому берут clientX и положение картинки на странице.
const img = document.querySelector('img[usemap]');
document.addEventListener('click', (e) => {
const r = img.getBoundingClientRect();
console.log(Math.round(e.clientX - r.left),
Math.round(e.clientY - r.top));
});Пример: атрибут coords тега area: неверные координаты
Кнопки задают разные записи. Закрашена кликабельная область, а строка «Кликабельная площадь картинки» показывает, какую долю картинки она занимает. Ноль процентов значит, что области нет.
Запись в coords | Что делает браузер |
|---|---|
Четыре числа для rect в обратном порядке | Область работает, углы поменялись местами сами |
Три числа для rect или нет coords совсем | Области нет |
Нулевой или отрицательный радиус у circle | Области нет |
Две вершины у poly, то есть четыре числа | Области нет, нужно не меньше шести чисел |
Проценты, например 0%,0%,50%,100% | Знак процента отбрасывается, числа читаются как пиксели |
| Область шире картинки | Область обрезается по краю картинки |
Атрибуты href и alt тега area: адрес и описание области
Адрес записывают в href, а текстовое описание области в alt.
Без href область не ссылка: клик доходит до скриптов, но адрес не открывается, клавиша Tab область пропускает, а вызов focus() фокус не даёт.
| Запись | Мышь | Клавиатура |
|---|---|---|
href="kitchen.html" | Клик открывает адрес | Tab переводит фокус на область, Enter открывает адрес |
Без href | Клик доходит до скрипта, адрес не открывается | Tab область пропускает |
Атрибут alt содержит короткое описание области: «Кухня», а не «Область 1». По стандарту он обязателен у каждой области с href и не нужен у области без href. На клик alt не влияет: область без него клик принимает, но валидатор такую запись отметит.
Перекрытие областей тега area: какая область сработает
Если две области закрывают одну точку, срабатывает та, что записана в разметке раньше.
Порядок записи важен для вложенных областей: маленькую область внутри большой записывают раньше. Если большую записать первой, она закроет маленькую целиком, и маленькая никогда не получит клик.
<map name="plan">
<area shape="circle" coords="100,50,30" href="hall.html"
alt="Холл">
<area shape="rect" coords="0,0,200,100" href="flat.html"
alt="Квартира">
</map>Пример: перекрытие областей тега area
Кнопки меняют порядок областей. Цвет в легенде совпадает с цветом области на картинке. Кликните в общей части прямоугольника и круга: строка «Последний клик» показывает область, которой достался клик. В последнем варианте default записан первым, но клик в общей части получает rect.
Видно два правила. Для обычных форм побеждает область, записанная в разметке раньше. А default в браузере работает как запасной: он получает клик только там, где нет других областей, где бы он ни был записан. Поэтому его записывают последним.
Атрибуты target и download тега area: куда вести и что скачать
Атрибуты target и download у area работают так же, как у обычной ссылки.
| Запись | Что происходит |
|---|---|
target="_self" | Адрес открывается в этой же вкладке, как и без target |
target="_blank" | Адрес открывается в новой вкладке, а window.opener в ней пуст |
target="_blank" rel="opener" | Новая вкладка, window.opener указывает на исходную страницу |
target="nm" | Вкладка с названием nm, window.opener указывает на исходную страницу |
download | Файл скачивается под названием из адреса |
download="my.txt" | Файл скачивается под названием my.txt |
download для адреса другого сайта | Атрибут не действует: браузер просто переходит по адресу |
Поэтому для открытия в новой вкладке хватает target="_blank": новая вкладка не получает доступа к исходной. Доступ даёт только явный rel="opener" или своё название вместо _blank.
Остальные атрибуты ссылки тоже есть: rel записывает связь с адресом (для внешней ссылки подходит nofollow), ping перечисляет адреса для уведомления о клике, а referrerpolicy управляет заголовком Referer.
Тег area и CSS: оформление, фокус и клавиатура
Оформить область стилями нельзя, но её можно подсветить отдельным элементом, а рамку фокуса браузер рисует сам.
Стили для area форму не окрашивают: контур, фон и рамка относятся к самому тегу, а не к форме области. Форма на картинке после добавления outline, background и border остаётся прежней, а рамка и фон рисуют маленький пустой прямоугольник рядом с картой.
С фокусом иначе: область получает его с клавиатуры без всяких стилей, а вид рамки фокуса зависит от браузера. Порядок обхода совпадает с порядком записи, а область без href пропускается.
Для подсветки поверх картинки размещают обычный элемент или svg с теми же координатами и показывают его по событиям области, о которых говорится ниже. Элементу задают pointer-events: none, чтобы он не перехватывал клики.
.plan { position: relative; display: inline-block; }
.mark {
position: absolute; left: 0; top: 0;
width: 100px; height: 100px;
background: rgb(255 107 107 / 0.4);
pointer-events: none;
}Тег area в JavaScript: свойства и события
Из JavaScript область читают как обычную ссылку: свойства повторяют атрибуты, а события приходят на сам area.
Свойства shape, coords, alt, target, download, rel, ping и referrerPolicy повторяют атрибуты. Свойство shape отдаёт записанную строку как есть: для RECT возвращается RECT, для weird возвращается weird. Свойство href возвращает полный адрес, а для его частей есть protocol, hostname, pathname, search и hash. Метод click() вызывает переход, как настоящий клик. Свойств text, type и hreflang у area нет.
На area приходят mouseenter, mouseleave, mouseover, mouseout, mousedown, mouseup, click, focus и blur. У события click свойство target указывает на area, а не на картинку, и обработчик на img такой клик не получает.
const area = document.querySelector('area[alt="Кухня"]');
const mark = document.querySelector('.mark');
console.log(area.shape, area.coords);
console.log(area.href, area.hostname);
area.addEventListener('mouseenter', () => mark.hidden = false);
area.addEventListener('mouseleave', () => mark.hidden = true);Пример: свойства и события тега area в JavaScript
Кнопки переключают область, чьи свойства показаны в блоке. Наведите курсор на область, кликните по ней и пройдите по областям клавишей Tab: журнал показывает последние события. Размер самого тега на странице равен 0 на 0.
Почему тег area не работает
Если область не срабатывает, причину ищут в самой области, в её координатах и в связи с картинкой.
| Причина | Что видно | Что делать |
|---|---|---|
area записан вне map | Клик получает картинка | Записать область внутри map |
Картинка не связана с картой по usemap и name | Области не срабатывают | Сверить записи по странице про тег map |
У области нет href | Адрес не открывается, Tab область пропускает | Записать href |
Мало чисел в coords | Области нет | rect: четыре числа, circle: три, poly: шесть и больше |
Радиус у circle нулевой или отрицательный | Области нет | Записать положительный радиус |
| Координаты рассчитаны на другой размер картинки | Область смещена относительно рисунка | Пересчитать координаты, см. адаптивную картинку |
| Большая область записана раньше малой | Малая область не получает клик | Записать малую область раньше |
| Область выходит за край картинки | Работает только часть внутри картинки | Сократить координаты |
| Поверх картинки находится другой элемент | Клик получает верхний элемент | Задать наложенному элементу pointer-events: none |
Частые ошибки с тегом area
Основные ошибки связаны с лишними записями, неверными числами и ожиданием, что область можно оформить стилями.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
<area shape="rect" coords="0,0,100,100"> | Нет href: адрес не открывается | Записать href и alt |
<area ...></area> | Закрывающий тег браузер пропускает | Убрать закрывающий тег |
shape="rect" coords="0,0,100" | Области нет | Записать четыре числа |
shape="circle" coords="50,50,-40" | Области нет | Записать положительный радиус |
coords="0%,0%,50%,100%" | Знак процента отбрасывается, числа читаются как пиксели | Записать координаты в пикселях |
shape="square" | Значение читается как rect | Записать rect, circle, poly или default |
| Большая область записана раньше малой | Малая область никогда не срабатывает | Записать малую область раньше |
download для адреса другого сайта | Атрибут игнорируется | Применять только к своим файлам |
Обработчик клика на img для областей | Клик по области до картинки не доходит | Слушать area, map или document |
area { outline: 2px solid red } | Форма области не окрашивается | Разместить поверх картинки отдельный элемент |
