Карта изображения

В 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

Карта изображений на стороне клиента в HTML состоит из двух частей:

фактическое изображение, встроенное в <img> ярлык. Тег изображения должен иметь атрибут usemap, в котором указывается карта изображения, используемая для этого изображения (на одной странице может существовать несколько карт изображений).
А <map> элемент, и внутри него <area> элементы, каждый из которых определяет одну кликабельную область на карте изображения. Они похожи на <a> tag определение того, какой URL-адрес следует открыть для обычной веб-ссылки. А title Может быть предоставлен атрибут, который может отображаться как всплывающая подсказка, если пользователь рабочего стола наводит указатель мыши на область. По причинам доступности Интернета часто важно (а в некоторых случаях это может быть даже юридическим или договорным требованием) предоставить alt атрибут, описывающий ссылку, которую программа чтения с экрана может прочитать, например, слепым пользователям. ^[3]

The <area> элементы могут быть прямоугольниками ( shape="rect"), многоугольники ( shape="poly") или круги ( shape="circle"). Shape-Values — это пары координат. Каждая пара имеет значение X и Y (слева/верху изображения) и разделяется запятой.

Прямоугольник: установите четыре координаты: «x1,y1,x2,y2».
Многоугольник: установите необходимое количество координат (кратное двум): «x1,y1,x2,y2, [...] xn,yn»
Круг: одна пара координат и другое значение с радиусом: «x1,y1,radius».

В следующем примере определяется прямоугольная область («9 372 66 397»). Когда пользователь щелкает где-нибудь внутри этой области, он попадает на домашнюю страницу английской Википедии .

<img src="image.png" alt="Website map" usemap="#mapname" />
<map name="mapname">
  <area shape="rect" coords="9,372,66,397" href="https://en.wikipedia.org/" alt="Wikipedia" title="Wikipedia" />
</map>

CSS

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

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

Пример карты изображения The Club . При нажатии на человека на картинке браузер загружает соответствующую статью.

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

Поскольку создание карт изображений в текстовом редакторе требует много времени и усилий, было разработано множество приложений, позволяющих веб-дизайнерам быстро и легко создавать карты изображений так же, как они создавали бы фигуры в редакторе векторной графики . Примерами таких приложений являются Adobe Dreamweaver или KImageMapEditor (для KDE ), а также плагин imagemap, найденный в GIMP . Бесплатный офисный пакет с открытым исходным кодом LibreOffice также включает специальный редактор ImageMap. ^[4]

Карты-изображения, на которых кликабельные области не видны, рискуют подвергнуть пользователя таинственной навигации по мясу . Даже если они это сделают, то, к чему они приведут, может быть неочевидно. Частично это можно исправить с помощью эффектов опрокидывания. ^[5]

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

Поскольку формат изображений масштабируемой векторной графики (SVG) предоставляет собственные механизмы добавления гиперссылок. ^[6] и другие, более сложные формы интерактивности. ^[7] Для изображений традиционные методы отображения изображений обычно не нужны при работе с векторными изображениями в формате SVG.

См. также

Тайна мясной навигации

Ссылки

^ «Расширение IMG для Mosaic 1.1» .
^ «HTML: язык разметки (справочник по языку HTML)» .
^ «Карты изображений в HTML» . Доступность . Пенсильванский государственный университет . Проверено 6 октября 2013 г.
^ «Справка по редактору LibreOffice ImageMap» .
^ Фландерс, Винсент (март 1998 г.). Отстойные веб-страницы: научитесь хорошему дизайну, глядя на плохой дизайн . Сан-Франциско: ISBN Sybex Inc. 978-0-7821-2187-2 .
^ «Спецификация SVG: Связывание» . Консорциум Всемирной паутины. 16 августа 2011 года . Проверено 24 июня 2019 г.
^ «Спецификация SVG: интерактивность» . Консорциум Всемирной паутины. 16 августа 2011 года . Проверено 24 июня 2019 г.

[1] «Расширение IMG для Mosaic 1.1» .

[2] «HTML: язык разметки (справочник по языку HTML)» .

[access-ability-3] «Карты изображений в HTML» . Доступность . Пенсильванский государственный университет . Проверено 6 октября 2013 г.

[4] «Справка по редактору LibreOffice ImageMap» .

[5] Фландерс, Винсент (март 1998 г.). Отстойные веб-страницы: научитесь хорошему дизайну, глядя на плохой дизайн . Сан-Франциско: ISBN Sybex Inc. 978-0-7821-2187-2 .

[6] «Спецификация SVG: Связывание» . Консорциум Всемирной паутины. 16 августа 2011 года . Проверено 24 июня 2019 г.

[7] «Спецификация SVG: интерактивность» . Консорциум Всемирной паутины. 16 августа 2011 года . Проверено 24 июня 2019 г.

[1]

[2]

[3]

[4]

[5]

[6]

[7]