Карты изображений HTML

Элемент Picture выбирает среди файлов изображений. Карта изображения (image map) оставляет одно изображение и делает кликабельными его области — горячие зоны на плане этажа, схеме или простом графическом меню. Вы связываете img с атрибутом usemap и <map>, заполненный ссылками <area>.

Что такое карта изображения

Карта изображения — не отдельный формат файла. Это HTML, который говорит: «этот прямоугольник (или круг, или многоугольник) на картинке должен вести себя как ссылка». Зрячие пользователи нажимают на зону; вспомогательным технологиям нужен понятный alt на каждом area, потому что рядом с горячей зоной может не быть видимого текста.

Прямой ответ

1. Добавьте usemap="#mapname" на img.
2. Добавьте <map name="mapname"> с одним или несколькими элементами <area>.
3. Каждому area нужны shape, coords, href и свой alt.
   Символ # в usemap должен совпадать с name карты (не придумывайте второе написание).

Значения shape кратко

Простая прямоугольная карта

Двух горячих зон на макете стола достаточно, чтобы освоить связку: usemap, совпадающий name и прямоугольники area с честным текстом alt.

Как читать пример

• usemap="#deskmap" на изображении указывает на карту с именем deskmap
• Каждый area — ссылка: href — назначение, alt — имя горячей зоны
• coords для rect — left, top, right, bottom в пиксельной сетке изображения
• Собственный alt изображения («Desk layout») описывает всю графику; alt у area называют зоны

Как работают координаты

Координаты измеряются в CSS-пикселях изображения в том виде, в каком оно выложено для карты. Если вы задаёте width и height на img, держите coords согласованными с этим отображаемым размером, пока учитесь. Неверные числа дают горячие зоны, которые промахивают мимо нарисованных объектов — типичный «тихий» сбой.

Привычки доступности

Каждому кликабельному area нужен осмысленный alt. Не оставляйте горячие зоны безымянными. Предпочитайте карты, где назначение каждой области очевидно. Если дизайн требует сложного адаптивного поведения, многие команды переходят на SVG со ссылками или отдельные кнопки вместо хрупких пиксельных карт.

Когда карты помогают — и когда нет

Карты удобны для одной схемы с несколькими стабильными областями. Они становятся неудобными, когда изображение свободно масштабируется через много брейкпоинтов: классические coords не переписываются сами. Для современных адаптивных интерфейсов рассмотрите отдельные связанные изображения, CSS-раскладку или SVG. Тем не менее знание карт изображений помогает, когда вы наследуете старые страницы или простые учебные демо.

circle и poly (краткая заметка)

circle использует центр и радиус. poly перечисляет пары точек x,y вокруг произвольной формы. Начните с rect, пока связка usemap / name не станет естественной, затем экспериментируйте с другими формами на учебной графике.

Практика в редакторе

1. Возьмите простое широкое изображение с двумя очевидными областями.
2. Создайте map с двумя rect-областями, ведущими на две небольшие учебные страницы.
3. Тщательно сопоставьте usemap="#name" с map name="name" (включая #).
4. Щёлкните каждую область и подтвердите переход.
5. Один раз сломайте совпадение имён, посмотрите «мёртвые» горячие зоны, затем исправьте.
6. Улучшите любой area, чей alt говорит только «link».

Типичные ошибки

• Несовпадение usemap / name (забыли # в usemap или переименовали только одну сторону)
• Отсутствует alt на каждом area
• Coords не совпадают с реальным размером изображения или положением объектов
• Опора на карты изображений для сильно «текучих» адаптивных макетов без плана
• Единственное описание только на img, а области без подписей

Итог

• Карты изображений связывают img + usemap + map + area
• Формы включают rect, circle и poly
• Каждой области нужны href, alt, shape и coords
• Держите имена совпадающими, а coords честными
• Для сложных адаптивных UI рассмотрите современные альтернативы — всё равно изучите карты для наследия и простых схем