Атрибут ismap (от английского image map, «карта изображения») делает картинку серверной картой: при клике по ней браузер дописывает к адресу ссылки координаты клика, и сервер решает, куда вести читателя. Закрывающий тег для него не нужен: это булев атрибут, он пишется внутри открывающего тега, а у самого <img> закрывающего тега нет.
Способ старый, сейчас вместо него обычно используют клиентскую карту через usemap. Но атрибут остаётся в стандарте, и его поведение полезно знать. Все описанные ниже результаты я проверил в браузере, на котором я проверял.
<a href="/go">
<img src="map.png" alt="Карта" width="200" height="100" ismap>
</a>В этой статье
- Что такое атрибут ismap в HTML и зачем он нужен
- Для каких тегов работает ismap: только img внутри ссылки
- Как записать ismap: булев атрибут и свойство isMap
- Как браузер добавляет координаты к адресу
- Особенности: запрос в адресе, якорь и клавиатура
- Ismap и usemap на одной картинке
- Как серверу прочитать координаты
- Частые ошибки в атрибуте ismap
- Шпаргалка по атрибуту ismap
Что такое атрибут ismap в HTML и зачем он нужен
Обычно клик по картинке-ссылке ведёт на один адрес, куда бы вы ни нажали. С атрибутом ismap браузер добавляет к адресу позицию клика, например /go?50,30. Серверная программа читает эти числа и выбирает, какую страницу показать.
Всё решает сервер, поэтому такая карта называется серверной. Противоположность ей клиентская карта: области описаны в самой разметке через <map> и <area>, а картинка подключается атрибутом usemap. Серверу при этом ничего не нужно.
| Способ | Кто решает, куда вести | Пример записи |
|---|---|---|
ismap | Сервер по координатам в адресе | <a href="/go"><img src="m.png" alt="" ismap></a> |
usemap | Браузер по областям area | <img src="m.png" alt="" usemap="#m"> |
Для каких тегов работает ismap: только img внутри ссылки
Атрибут есть только у <img>, и действует он, лишь если картинка лежит внутри ссылки с адресом. Свойство isMap у <iframe>, <video>, <input>, <canvas>, <source>, <object>, <area> и у самой ссылки я не нашёл, как и у SVG-элемента image.
| Разметка | Что получилось | Пример записи |
|---|---|---|
Картинка внутри ссылки с href | Клик ведёт по ссылке с координатами | <a href="/go"><img src="m.png" alt="" ismap></a> |
| Картинка без ссылки | Клик ничего не делает | <img src="m.png" alt="" ismap> |
Ссылка без href | Клик ничего не делает | <a><img src="m.png" alt="" ismap></a> |
| Картинка внутри кнопки | Координат нет | <button><img src="m.png" alt="" ismap></button> |
<input> с типом image | Свой механизм: при отправке формы добавляются x и y | <input type="image" src="m.png" alt=""> |
У <input> координаты уходят в форму как ?x=50&y=30 и без атрибута ismap. Это отдельная возможность, к серверной карте она не относится.
Как записать ismap: булев атрибут и свойство isMap
Атрибут булев: важно только то, есть он или нет. Значение браузер не читает, поэтому ismap="false" тоже включает его. Ниже результаты в браузере, на котором я проверял.
| Запись | Свойство img.isMap | Пример записи |
|---|---|---|
ismap | true | <img ismap> |
ismap="" | true | <img ismap=""> |
ismap="ismap" | true | <img ismap="ismap"> |
ismap="false" | true: значение не читается | <img ismap="false"> |
| Атрибута нет | false | <img> |
Из скрипта работает свойство isMap с большой буквой M. Запись true создаёт атрибут с пустым значением, запись false убирает его.
Пример: как записывается ismap
Выберите запись или действие и посмотрите, что стало с атрибутом и свойством.
Результат считает ваш браузер, он может отличаться от моих замеров.
Как браузер добавляет координаты к адресу
К адресу ссылки добавляется знак вопроса и два числа через запятую: сначала расстояние от левого края картинки, потом от верхнего. Это обычная запятая, а не пара x=...&y=..., как у формы.
| Условие | Что получилось при клике в точку 50, 30 | Пример записи |
|---|---|---|
| Картинка без отступов | К адресу добавлено ?50,30 | <img ismap width="200" height="100"> |
| Рамка 5px и padding 10px | Отсчёт идёт от внутреннего края картинки: ?35,15 | img { padding: 10px; border: 5px solid; } |
| Картинку растянули стилями до 400 на 200 | Координаты остались экранными: ?50,30 | img { width: 400px; height: 200px; } |
| Правый нижний пиксель картинки 200 на 100 | Получилось ?199,99 | <img ismap width="200" height="100"> |
Числа целые, их меряют в пикселях CSS, а не в пикселях файла. Если картинку показывают в другом размере, сервер получит экранные значения, и пересчитывать их придётся самому.
Пример: какой адрес получится при клике
Выберите вариант и кликните по картинке. Переход отменяется, чтобы вы увидели адрес, на который браузер собирался перейти.
Адрес показывает ваш браузер через Navigation API. Если он не поддерживается, демонстрация об этом сообщит.
Особенности: запрос в адресе, якорь и клавиатура
Браузер дописывает координаты механически, поэтому в нескольких случаях адрес получается неудобным для сервера.
| Ситуация | Что получилось | Пример записи |
|---|---|---|
| В адресе уже есть запрос | Координаты добавлены ещё одним знаком вопроса: /go?a=1?50,30 | <a href="/go?a=1"> |
| В адресе есть якорь | Координаты оказались после якоря: /go#h?50,30, сервер их не получит | <a href="/go#h"> |
| Переход с клавиатуры (фокус и Enter) | Координат нет, открывается обычный адрес | <a id="a" href="/go"> |
Ссылка с target | Координаты добавляются так же | <a href="/go" target="_self"> |
| Картинка внутри другого элемента ссылки | Работает так же | <a href="/go"><span><img ismap></span></a> |
Из этого следуют два совета. Для серверной карты используйте адрес без запроса и без якоря. И не полагайтесь только на неё: человек, который ходит по странице клавиатурой, координат не отправит. Поэтому рядом с такой картинкой нужны обычные ссылки на те же разделы.
Ismap и usemap на одной картинке
Серверную и клиентскую карту можно записать на одной картинке, но вместе они не складываются. Я проверил картинку внутри ссылки с обоими атрибутами.
| Куда кликнули | Что получилось | Пример записи |
|---|---|---|
В область area | Открылась ссылка области, координат нет | <area shape="rect" coords="0,0,50,50" href="/area"> |
| Мимо всех областей | Открылась внешняя ссылка a без координат | <a href="/go"><img ismap usemap="#m"></a> |
Практический вывод: если картинка описана через <map> и <area>, атрибут ismap ей не нужен. Подробности клиентской карты в статьях про эти теги.
Как серверу прочитать координаты
На стороне сервера обработка одинакова для любого языка: из адреса берут строку запроса, делят её по запятой и получают два числа.
адрес: /go?50,30
запрос: "50,30"
x, y = запрос.split(",") -> 50, 30Дальше по этим числам сервер ищет, в какую область попал клик, и отправляет читателя на нужную страницу. Если своей серверной части у сайта нет, обработать такие координаты некому, и остаётся клиентская карта через usemap.
Частые ошибки в атрибуте ismap
Ошибки в основном связаны с тем, что атрибут путают с клиентской картой.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
ismap без ссылки вокруг картинки | Клик ничего не делает | Обернуть картинку в a с href |
Ссылка без href | Клик ничего не делает | Добавить адрес ссылки |
ismap="false" | Атрибут всё равно включён | Убрать атрибут целиком |
ismap="true" ради «правильной» записи | Значение не читается, достаточно слова | Писать ismap без значения |
Ждут пару x=50&y=30 | Приходит ?50,30 | Делить строку запроса по запятой |
| В адресе ссылки уже есть запрос | Получается ?a=1?50,30 | Писать адрес без запроса |
| В адресе ссылки есть якорь | Координаты уходят после якоря и до сервера не доходят | Убрать якорь из адреса |
| Считают координаты в пикселях файла | Они экранные и зависят от размера показа | Пересчитать с учётом реального размера |
| Рассчитывают на клавиатуру | Переход без координат | Дать обычные ссылки рядом с картинкой |
ismap и usemap вместе | При клике в область координаты не добавляются | Оставить один способ |
ismap у input, iframe, video | У этих тегов такого свойства нет | Использовать только у img |
Шпаргалка по атрибуту ismap
Всё главное из статьи в одной таблице.
| Задача | Как записать | Пример записи |
|---|---|---|
| Серверная карта | Картинка с ismap внутри ссылки | <a href="/go"><img src="m.png" alt="" ismap></a> |
| Формат координат | Через запятую после знака вопроса | /go?50,30 |
| Откуда отсчёт | Внутренний край картинки, пиксели CSS | ?35,15 |
| Выключить | Убрать атрибут | <img src="m.png" alt=""> |
| Прочитать | Свойство isMap | img.isMap |
| Включить из скрипта | Записать true | img.isMap = true; |
| Клиентская карта | Атрибут usemap и теги map, area | <img usemap="#m"> |
| Не путать с формой | input type="image" шлёт x и y | ?x=50&y=30 |
