Введение

Метод добавления ссылок на части изображения

В HTML и XHTML карта изображения — это список координат, связанных с конкретным изображением, созданный для привязки областей изображения к различным адресам (в отличие от обычной ссылки на изображение, где вся область изображения ведет к одному адресу). Например, на карте мира каждая страна может быть связана гиперссылкой с дополнительной информацией об этой стране. Назначение карты изображения — предоставить простой способ создания ссылок на различные части изображения без необходимости разделять его на отдельные файлы.

На сервере

Карты изображений на стороне сервера впервые были реализованы в версии 1.1 веб-браузера Mosaic. Карты изображений на стороне сервера позволяют веб-браузеру отправлять серверу информацию о координатах клика пользователя внутри изображения. Это позволяет серверу принимать решения на уровне пикселей о том, какой контент вернуть в ответ (возможные методы включают использование масок изображений, запросов к базе данных или конфигурационных файлов на сервере). HTML-код для такого типа карты изображений на стороне сервера требует размещения тега `<img>` внутри тега якоря `<a>`, при этом тег `<img>` должен содержать атрибут `ismap`. `<a href="/imagemapper"><img src="image.png" ismap /></a>`
Когда пользователь кликает внутри изображения, браузер добавляет координаты X и Y (относительно верхнего левого угла изображения) к URL-адресу якоря в виде строки запроса и обращается к полученному URL (например, /imagemapper?3,9). Если браузер не поддерживает атрибут `ismap`, строка запроса не должна добавляться к URL-адресу якоря, и сервер должен реагировать соответствующим образом (например, возвращая страницу навигации, содержащую только текст).

Клиентская сторона

Карты изображений на стороне клиента были представлены в HTML 3.2 и не требуют выполнения какой-либо специальной логики на сервере (они полностью реализованы на стороне клиента). Им также не требуется JavaScript.

CSS (англ.)

Более современный подход заключается в наложении ссылок на изображение с помощью абсолютного позиционирования в CSS, однако он поддерживает только прямоугольные области для кликов. Этот метод CSS может быть полезен для корректной работы карты изображений на iPhone, который может некорректно масштабировать стандартные HTML-карты изображений.

Создание и использование

Можно создавать карты изображений вручную, используя текстовый редактор, но это требует от веб-дизайнеров знания HTML и умения вычислять координаты областей, которые они хотят разместить на изображении. В результате большинство карт изображений, созданных вручную, представляют собой простые многоугольники. Поскольку создание карт изображений в текстовом редакторе требует значительных затрат времени и усилий, было разработано множество приложений, позволяющих веб-дизайнерам создавать их быстро и легко, подобно созданию фигур в векторном графическом редакторе. Примеры таких приложений – Dreamweaver от Adobe, KImageMapEditor (для KDE) и плагин imagemap в GIMP. Бесплатный и открытый офисный пакет LibreOffice также включает в себя специализированный редактор карт изображений. Карты изображений, в которых кликабельные области не очевидны, рискуют предоставить пользователю запутанную навигацию. Даже если области кликабельные, направление перехода может быть неочевидным. Эту проблему можно частично решить с помощью эффектов наведения курсора.

Изображения SVG

Поскольку формат Scalable Vector Graphics (SVG) предоставляет собственные механизмы для добавления гиперссылок и других, более сложных форм интерактивности к изображениям, традиционные методы создания карт изображений обычно не требуются при работе с векторной графикой в формате SVG.