Атрибут usemap (от английского use map, «использовать карту») подключает к картинке карту областей: клик по разным частям одной картинки ведёт на разные ссылки. Закрывающий тег для него не нужен: атрибут пишется внутри открывающего тега, например usemap="#m", а у самого <img> закрывающего тега нет.
Значение атрибута ссылается на карту: решётка и значение name тега <map>. Сами области описывают вложенные в карту теги <area>. Все результаты ниже я проверил в браузере, на котором я проверял.
<img src="map.png" alt="Схема" width="200" height="100"
usemap="#m">
<map name="m">
<area shape="rect" coords="0,0,100,50"
href="/room-1" alt="Комната 1">
</map>В этой статье
- Что такое атрибут usemap в HTML и зачем он нужен
- Для каких тегов работает usemap: img, а также object и input
- Как записать значение usemap: решётка и name карты
- Как usemap связан с тегом map: name, id и порядок
- Какие области описывает карта: коротко про area
- Размер картинки и координаты областей
- Доступность карты: alt и порядок Tab
- Usemap и ismap на одной картинке
- Usemap в JavaScript: свойство useMap
- Частые ошибки в usemap и шпаргалка
Что такое атрибут usemap в HTML и зачем он нужен
Это клиентская карта изображения: все области описаны прямо в разметке, поэтому серверу ничего считать не нужно. Браузер сам сравнивает точку клика с областями и открывает ссылку подходящей. Противоположность ей серверная карта, которую включает ismap: там координаты клика уходят на сервер.
| Способ | Кто решает, куда вести | Пример записи |
|---|---|---|
usemap | Браузер по областям area | <img src="m.png" alt="" usemap="#m"> |
ismap | Сервер по координатам в адресе | <a href="/go"><img src="m.png" alt="" ismap></a> |
Для каких тегов работает usemap: img, а также object и input
Основное место атрибута это <img>. Свойство useMap я нашёл ещё у <object> и <input>, но это старые варианты, к современной вёрстке они не относятся. У <iframe>, <video>, <canvas>, <source>, <embed>, <map>, <area>, ссылки и SVG-элемента image свойства нет.
| Тег | Что можно сказать | Пример записи |
|---|---|---|
<img> | Основной случай: картинка с кликабельными областями | <img src="m.png" alt="" usemap="#m"> |
<object> | Свойство есть, использовать для карт не рекомендую | <object data="m.png" usemap="#m"></object> |
<input> | Свойство есть, это устаревший способ | <input type="image" src="m.png" usemap="#m"> |
Как записать значение usemap: решётка и name карты
Значение должно начинаться с решётки, за которой идёт name карты, то есть значение одноимённого атрибута тега <map>. В браузере, на котором я проверял, получилось так.
| Запись | Что получилось | Пример записи |
|---|---|---|
#m | Карта name="m" найдена | <img usemap="#m"> |
m без решётки | Карта не найдена, клик ничего не открывает | <img usemap="m"> |
#M | Другой регистр: карта name="m" не найдена | <img usemap="#M"> |
/page.html#m | Карта найдена: важна часть после решётки | <img usemap="/page.html#m"> |
# | После решётки пусто: ничего не открывает | <img usemap="#"> |
| Карты с таким именем нет | Ничего не открывает | <img usemap="#net"> |
Свойство useMap возвращает значение так, как оно записано: у usemap="m" вернётся "m", без исправлений.
Пример: какие значения usemap находят карту
Выберите запись и кликните по закрашенному прямоугольнику. Переход отменяется, чтобы вы увидели результат.
Результат показывает ваш браузер через Navigation API. Если он не поддерживается, демонстрация об этом сообщит.
Как usemap связан с тегом map: name, id и порядок
Карту ищут по name, и тут есть детали, которые легко упустить.
| Ситуация | Что получилось | Пример записи |
|---|---|---|
У карты есть только name | Найдена | <map name="m"> |
У карты есть только id | Найдена и по id | <map id="m"> |
name="m" и id="x" | Для usemap="#m" найдена по name | <map name="m" id="x"> |
| Две карты с одним именем | Сработала первая по порядку в документе | <map name="m"> ... <map name="m"> |
| Карта до картинки | Работает | <map name="m"></map><img usemap="#m"> |
| Карта после картинки | Работает | <img usemap="#m"><map name="m"></map> |
| Карта добавлена скриптом позже | Работает | document.body.append(map); |
Практический вывод: name карты должен быть уникальным и записанным в том же регистре, что в usemap. Лучше всегда писать name, как в примерах, а не только id.
Пример: где может находиться карта
Выберите вариант и кликните по закрашенному прямоугольнику в левом верхнем углу картинки.
Результат показывает ваш браузер через Navigation API. Последний вариант показывает, что области не растягиваются вместе с картинкой.
Какие области описывает карта: коротко про area
Каждая область это тег <area> внутри карты. Форму областей задаёт shape, числа задаёт coords, адрес задаёт href, а текст для тех, кто не видит картинку, задаёт alt. Подробно о каждом из них в отдельных статьях справочника, а здесь достаточно одного примера.
<map name="m">
<area shape="rect" coords="0,0,100,50"
href="/room-1" alt="Комната 1">
</map>Область rect задана двумя углами: левым верхним и правым нижним, в пикселях CSS от левого верхнего угла картинки. В моём замере область без href клика не принимала, а область с href и alt открывала ссылку.
Размер картинки и координаты областей
Это самое неприятное свойство клиентских карт. Координаты записаны в пикселях и сами не меняются, когда картинка меняет размер.
Я проверил: картинка 200 на 100 с областью на её левой верхней четверти была растянута стилями до 400 на 200. Область осталась прежней, и клик там, где теперь находится закрашенная часть, но за пределами старых координат, ничего не открыл. Последний вариант демонстрации выше показывает это на ваших глазах.
Что можно сделать. Если размер картинки задан жёстко, то ничего: координаты сходятся. Если картинка адаптивная, координаты нужно пересчитывать скриптом по отношению текущей ширины к исходной. Я проверил такой пересчёт на картинке, растянутой вдвое: после него клик по новой области сработал.
const img = document.querySelector('img');
const area = document.querySelector('area');
const base = [0, 0, 100, 50];
const k = img.clientWidth / 200; // 200 - исходная ширина
area.coords = base.map(n => Math.round(n * k)).join(',');Скрипт нужно запускать после загрузки картинки и при изменении размера окна.
Доступность карты: alt и порядок Tab
Карта изображения должна работать и без мыши. Я проверил две вещи.
| Проверка | Что получилось | Пример записи |
|---|---|---|
| Обход клавишей Tab | Области получают фокус по очереди, в порядке записи, а потом фокус идёт дальше | <area href="/a" alt="A"><area href="/b" alt="B"> |
| Текст области | Нужен alt у каждой области, иначе ссылка не описана | <area href="/a" alt="Комната 1"> |
| Описание всей картинки | У самого img тоже нужен alt | <img usemap="#m" alt="Схема этажа"> |
О том, как это озвучивают программы чтения с экрана, я не проверял, поэтому здесь не пишу. Надёжный совет простой: дублируйте области обычными ссылками рядом с картинкой, чтобы навигация не зависела от карты.
Usemap и ismap на одной картинке
Серверная и клиентская карта вместе не складываются. В статье про ismap я проверил картинку внутри ссылки с обоими атрибутами.
| Куда кликнули | Что получилось | Пример записи |
|---|---|---|
В область area | Открылась ссылка области, координат нет | <area shape="rect" coords="0,0,50,50" href="/area"> |
| Мимо всех областей | Открылась внешняя ссылка a без координат | <a href="/go"><img ismap usemap="#m"></a> |
Оставьте один способ: для современной вёрстки это usemap.
Usemap в JavaScript: свойство useMap
В скрипте атрибут доступен как свойство useMap с большой буквой M. Запись в свойство меняет атрибут, а чтение возвращает значение без исправлений.
| Действие | Что получилось | Пример записи |
|---|---|---|
| Чтение без атрибута | Вернулась пустая строка | img.useMap |
| Запись значения | Атрибут в разметке изменился | img.useMap = '#m' |
| Запись без решётки | Атрибут записан как есть, свойство вернуло то же значение | img.useMap = 'm' |
const img = new Image();
img.useMap = '#m';
img.src = 'map.png';
console.log(img.useMap); // "#m"Частые ошибки в usemap и шпаргалка
Большинство ошибок связано с записью значения и с масштабом картинки.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
usemap="m" | Без решётки карта не найдена | Писать usemap="#m" |
usemap="#M" при name="m" | Регистр важен, карта не найдена | Совпасть с именем буква в букву |
| Нет карты с таким именем | Клик ничего не открывает | Добавить map с нужным name |
| Две карты с одним именем | Работает только первая | Давать картам разные name |
У карты только id | Найдена, но надёжнее писать name | Добавить name |
Область без href | Клика нет | Добавить адрес |
Область без alt | Ссылка не описана для тех, кто не видит картинку | Писать alt у каждой области |
| Картинка растягивается стилями | Координаты остаются прежними, области смещаются | Пересчитать координаты скриптом |
usemap и ismap вместе | При клике в область координаты не добавляются | Оставить usemap |
usemap у iframe или video | Такого свойства нет | Использовать только у img |
| Только карта без обычных ссылок | Навигация зависит от одной картинки | Продублировать ссылки рядом |
Шпаргалка по атрибуту usemap
| Задача | Как записать | Пример записи |
|---|---|---|
| Подключить карту | Решётка и name карты | <img usemap="#m"> |
| Описать карту | Тег map с name | <map name="m"> |
| Добавить область | Тег area с href и alt | <area shape="rect" coords="0,0,50,25" href="/a" alt="A"> |
| Адаптивная картинка | Пересчитать coords скриптом | area.coords = ... |
| Прочитать значение | Свойство useMap | img.useMap |
| Не путать | ismap отправляет координаты на сервер | <img ismap> |
