HTML тег <area>
Тег <area> определяет активные области карты изображения. Описание тега, его атрибуты и примеры использования.
Тег <area> определяет активные области (координаты, форму, размер и т. д.) карты изображения, заданной тегом <map>. При нажатии на активную область происходит определённое действие, например переход на страницу с подробной информацией.
На этой странице объясняется, что делает <area>, как работает система координат coords, все значения атрибута shape (включая poly и default), правила доступности, которые необходимо соблюдать, а также типичная проблема с адаптивной вёрсткой, с которой сталкиваются в реальных проектах.
Тег <area> всегда размещается внутри тега <map>. Активные области могут перекрываться; в этом случае при клике активируется та область, которая находится позже в порядке DOM.
Зачем и когда использовать карту изображения
Карта изображения превращает части одного <img> в отдельные кликабельные ссылки. Каждый <area> становится своей горячей точкой с собственным href, поэтому одно изображение может вести к нескольким адресатам — например, кликабельная диаграмма, план этажа или карта регионов.
Изображение соединяется с картой через атрибут usemap тега <img>, который указывает на name карты (например, usemap="#blockmap" соответствует <map name="blockmap">).
Когда карта изображения подходит:
- Кликабельные области действительно находятся внутри одного растрового изображения (фотографии, отсканированной диаграммы) и их сложно разбить на отдельные элементы.
- Формы нестандартные (контур страны, непрямоугольная горячая точка), для которых
polyявляется наиболее естественным решением.
Когда лучше выбрать альтернативу:
- Прямоугольные горячие точки над отдельным содержимым → просто используйте отдельные ссылки
<a>(каждая оборачивает собственное изображение или стилизованный блок). Это более гибко и адаптивно по умолчанию. - Векторная графика / масштабируемые диаграммы → используйте встроенный SVG с элементами
<a>внутри. Горячие точки SVG масштабируются вместе с макетом, поддерживают стилизацию при наведении и фокусе и значительно доступнее пиксельных фигур<area>. - Простые кнопки-оверлеи → ссылки, позиционированные через CSS поверх изображения, масштабируются лучше, чем фиксированные
coords.
Главный компромисс: координаты <area> измеряются в фиксированных пикселях, поэтому карта изображения не адаптируется при масштабировании изображения с помощью адаптивного CSS (см. раздел об ограничениях для адаптивной и мобильной вёрстки ниже).
Синтаксис
Тег <area> является пустым, то есть закрывающий тег не требуется. Однако в XHTML тег <area> должен быть закрыт (<area />).
Пример HTML тега <area>:
HTML тег <area>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Click on the logo or on one of the logo item to watch it closer:</p>
<img src="/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg" width="250" height="150" alt="block" usemap="#blockmap" />
<map name="blockmap">
<area shape="circle" coords="50,32,25" alt="html" href="/uploads/media/book_gallery/0001/01/d450f0358f947dffb3af91195c3002600d74101b.png" />
<area shape="circle" coords="218,115,25" alt="css" href="/uploads/media/book_gallery/0001/01/25521e981b34da57c8f51baddc5b76351b855818.png" />
<area shape="circle" coords="195,32,28" alt="php" href="/uploads/media/book_gallery/0001/01/4bbee6698c4884f25c46010d61b658dd62d2c04f.png" />
<area class="homepage" shape="rect" coords="35,55,90,90" alt="php" href="https://www.w3docs.com/" />
</map>
</body>
</html>Как работает система координат coords
Это та часть, в которой разработчики чаще всего ошибаются. Все значения coords — это смещения в пикселях, отсчитываемые от верхнего левого угла изображения, а не страницы и не viewport. Первая ось (x) увеличивается вправо; вторая ось (y) увеличивается вниз.
Смысл чисел зависит от shape:
rect—x1,y1,x2,y2: верхний левый угол, затем нижний правый угол.circle—x,y,radius: точка центра, затем радиус (всё в пикселях).poly—x1,y1,x2,y2,...,xn,yn: упорядоченный список вершин; браузер соединяет их и автоматически замыкает фигуру.default— без coords; область охватывает всё изображение.
Практический пример
Для изображения шириной 250 и высотой 150 пикселей прямоугольник, охватывающий левую верхнюю четверть, задаётся так:
<area shape="rect" coords="0,0,125,75" alt="Top-left quarter" href="/top-left">Читается как: верхний левый угол в (0, 0), нижний правый угол в (125, 75). Окружность с центром в середине того же изображения и радиусом 40 пикселей задаётся как coords="125,75,40".
Поскольку это сырые пиксельные значения, они должны соответствовать внутреннему (натуральному) размеру изображения, а не отображаемому размеру после масштабирования через CSS.
Пример фигуры «многоугольник» (poly)
Используйте shape="poly" для любой горячей точки непрямоугольной и не круглой формы — треугольника, стрелки, контура страны. Перечислите вершины по порядку; браузер проведёт прямые линии между последовательными точками и замкнёт путь обратно к первой точке.
<!DOCTYPE html>
<html>
<head>
<title>Polygon image map</title>
</head>
<body>
<p>Click inside the triangle:</p>
<img src="/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg"
width="250" height="150" alt="Diagram" usemap="#shapemap" />
<map name="shapemap">
<!-- A triangle: top-center, bottom-left, bottom-right -->
<area shape="poly" coords="125,20,30,130,220,130"
alt="Triangle hotspot linking to the docs" href="https://www.w3docs.com/" />
</map>
</body>
</html>Три точки (125,20), (30,130), (220,130) образуют углы треугольника; первую точку не нужно повторять в конце — фигура замыкается автоматически.
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| alt | текст | Задаёт альтернативный текст для активной области. |
| coords | x1,y1,x2,y2 | x,y,radius | x1,y1,...,xn,yn | Задаёт координаты активной области в пикселях от верхнего левого угла изображения. Значения зависят от формы: rect (верхний левый и нижний правый углы), circle (центр и радиус), poly (вершины многоугольника); не указывается для default. |
| download | filename | Указывает, что при нажатии на данную область файл должен быть загружен. |
| href | URL | Задаёт ссылку для перехода. Пропустите href, чтобы сделать область неактивной (без ссылки). |
| hreflang | language_code | Определяет язык связанного документа. Используется только вместе с href. |
| nohref | (нет) | Устаревший. Ранее помечал область как не имеющую ссылки. Удалён в HTML5 — вместо этого просто не указывайте атрибут href. |
| rel | alternate | author | bookmark | help | license | next | nofollow | noreferrer | prefetch | prev | search | tag | Устанавливает связь между текущим и связанным документами. |
| shape | rect | circle | poly | default | Определяет форму области. default делает область охватывающей всё изображение. |
| target | _blank | _self | _top | _parent | frame_name | Указывает, как должен открываться связанный документ. frame_name не поддерживается в HTML5. |
| type | media_type | Задаёт MIME-тип связанного документа. |
Тег <area> также поддерживает глобальные атрибуты и атрибуты событий.
Значение shape="default"
shape="default" определяет область без координат, которая охватывает всё изображение — всё, что не захвачено более конкретной областью rect, circle или poly. Удобно использовать как запасную ссылку или универсальную цель «нажмите куда угодно ещё».
<map name="catchall">
<area shape="circle" coords="125,75,40" alt="Center hotspot" href="/center">
<area shape="default" alt="Everywhere else" href="/elsewhere">
</map>Поскольку более конкретные области, совпадающие первыми, имеют приоритет, размещайте default последним, чтобы она перехватывала только те клики, которые не обработала ни одна другая область.
Доступность
Доступность — самая важная практическая задача при работе с картами изображений, поскольку само изображение не несёт текстовой информации. Каждая горячая точка невидима для программы чтения с экрана, если вы её не подписали.
altобязателен для каждого<area>. Спецификация требует его всякий раз, когда область содержитhref. Сделайте его содержательным: он должен описывать, куда ведёт ссылка (назначение или действие ссылки), а не изображение. Например,alt="Открыть справочник по CSS", а неalt="окружность".- Навигация с клавиатуры: браузеры делают каждый
<area>фокусируемой ссылкой, поэтому пользователи могут переключаться между горячими точками с помощьюTabи активировать их клавишейEnter. Это работает только если у каждой области есть иhref, и понятныйalt— область безaltобъявляется как ссылка без метки, что является серьёзным барьером. - У изображения тоже должен быть свой
alt. Задайтеaltдля тега<img>, чтобы описать картинку в целом, отдельно от меток ссылок для каждой области. - Для сложной графики со множеством регионов подумайте, не будет ли список обычных ссылок
<a>или встроенный SVG с фокусируемыми ссылками лучше служить пользователям вспомогательных технологий, чем пиксельные горячие точки.
Ограничения для адаптивной и мобильной вёрстки
Координаты <area> — это фиксированные пиксельные значения, привязанные к внутреннему размеру изображения. Они не масштабируются. Как только вы делаете изображение адаптивным — например, задаёте width: 100% или max-width: 100% в CSS — видимое изображение меняет размер, а горячие точки остаются привязанными к исходной пиксельной сетке. Кликабельные области тогда смещаются относительно того, что видит пользователь, а на небольших мобильных экранах они могут стать крошечными и трудно нажимаемыми.
Стандартный HTML не предлагает встроенного решения этой проблемы. На практике вы можете либо:
- Не использовать карты изображений в адаптивных макетах и применять масштабируемые альтернативы — ссылки
<a>, позиционированные через CSS поверх изображения, или встроенный SVG, горячие точки<a>которого масштабируются вместе с макетом. - Либо пересчитывать координаты с помощью JavaScript каждый раз при изменении размера изображения (дополнительная зависимость, которую нужно поддерживать).
Если ваш дизайн должен адаптироваться к разным размерам экрана, предпочтите SVG или позиционированные ссылки вместо <area> с самого начала.