В HTML и XHTML карта изображения — это список координат, относящихся к конкретному изображению , созданный для того, чтобы связать области изображения гиперссылками с различными пунктами назначения (в отличие от обычной ссылки на изображение, в которой вся область изображения ссылается на одно направление). Например, на карте мира каждая страна может иметь гиперссылку на дополнительную информацию об этой стране. Цель карты изображений — предоставить простой способ связать различные части изображения без разделения изображения на отдельные файлы изображений.
Карты изображений на стороне сервера впервые были поддержаны в Mosaic (веб-браузер) версии 1.1. [1] Карты изображений на стороне сервера позволяют веб-браузеру отправлять на сервер позиционную информацию о том, где пользователь щелкает мышью на изображении. Это позволяет серверу принимать попиксельные решения о том, какой контент возвращать в ответ (возможные методы — использовать слои маски изображения, запросы к базе данных или файлы конфигурации на сервере).
HTML - код для этого типа карты изображений на стороне сервера требует, <img>чтобы тег находился внутри тега привязки <a>...</a>и <img>включал атрибут ismap.
< a href = "/imagemapper" >< img src = "image.png" ismap /></ a >Когда пользователь щелкает внутри изображения, браузер добавит координаты X и Y (относительно верхнего левого угла изображения) к URL- адресу привязки в виде строки запроса и получит доступ к полученному URL-адресу [2] (например, /imagemapper?3,9) .
Если браузер не поддерживает ismap, то строку запроса нельзя добавлять к URL-адресу привязки , и сервер должен ответить соответствующим образом (например, вернув текстовую страницу навигации).
Карты изображений на стороне клиента были представлены в HTML 3.2 и не требуют выполнения какой-либо специальной логики на сервере (они полностью выполняются на стороне клиента). Они также не требуют никакого JavaScript .
Карта изображений на стороне клиента в HTML состоит из двух частей:
<img>. Тег изображения должен иметь атрибут usemap, в котором указывается карта изображения, используемая для этого изображения (на одной странице может существовать несколько карт изображений).<map>, а внутри него — <area>элементы, каждый из которых определяет одну кликабельную область на карте изображения. Это похоже на определение URL-адреса<a> tag , который следует открыть для обычной веб-ссылки. Может быть предоставлен атрибут , который может отображаться как всплывающая подсказка , если пользователь настольного компьютера наводит указатель мыши на область. По причинам веб-доступности часто важно (а в некоторых случаях это может быть даже требование закона или контракта) предоставить атрибут, описывающий ссылку, которую программа чтения с экрана может прочитать, например, слепым пользователям. [3]titlealtЭлементами <area>могут быть прямоугольники ( shape="rect"), многоугольники ( shape="poly") или круги ( shape="circle"). Shape-Values — это пары координат. Каждая пара имеет значение X и Y (слева/верху изображения) и разделяется запятой.
В следующем примере определяется прямоугольная область («9 372 66 397»). Когда пользователь щелкает где-нибудь внутри этой области, он попадает на домашнюю страницу английской Википедии .
< img src = "image.png" alt = "Карта веб-сайта" usemap = "#mapname" /> < имя карты = " имя карты" > < area shape = "rect" coords = "9,372,66,397" href = "https: //en.wikipedia.org/" alt = "Википедия" title = "Википедия" /> </ карта > Более современный подход — наложение ссылок на изображение с использованием абсолютного позиционирования CSS ; однако это поддерживает только прямоугольные кликабельные области. Этот метод CSS может подойти для правильной работы карты изображений на iPhone , которые могут некорректно масштабировать карты изображений в чистом HTML.
Карты изображений на стороне клиента можно создавать вручную с помощью текстового редактора, но для этого веб-дизайнерам необходимо знать, как кодировать HTML, а также как перечислять координаты областей, которые они хотят разместить на изображении. В результате большинство карт изображений, закодированных вручную, представляют собой простые полигоны.
Поскольку создание карт изображений в текстовом редакторе требует много времени и усилий, было разработано множество приложений, позволяющих веб-дизайнерам быстро и легко создавать карты изображений так же, как они создавали бы фигуры в редакторе векторной графики . Примерами таких приложений являются Adobe Dreamweaver или KImageMapEditor (для KDE ), а также плагин imagemap, найденный в GIMP . Бесплатный офисный пакет с открытым исходным кодом LibreOffice также включает специальный редактор ImageMap. [4]
Карты-изображения, на которых кликабельные области не видны, рискуют подвергнуть пользователя таинственной навигации по мясу . Даже если они это сделают, то, к чему они приведут, может быть неочевидно. Частично это можно исправить с помощью эффектов опрокидывания. [5]
Поскольку формат изображений Scalable Vector Graphics (SVG) предоставляет свои собственные механизмы для добавления гиперссылок [6] и других, более сложных форм интерактивности [7] к изображениям, традиционные методы карт изображений обычно не нужны при работе с векторными изображениями в SVG. формат.