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

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

На стороне сервера [ править ]

Карты изображений на стороне сервера впервые были поддержаны в Mosaic (веб-браузер) версии 1.1. ^[1] Серверные карты изображений позволяют веб-браузеру отправлять на сервер позиционную информацию о том, где пользователь щелкает внутри изображения. Это позволяет серверу принимать попиксельные решения о том, какой контент возвращать в ответ (возможные методы - использовать слои маски изображения, запросы к базе данных или файлы конфигурации на сервере).

Код HTML для этого типа карты изображений на стороне сервера требует, чтобы <img>тег находился внутри тега привязки, <a>...</a>и он <img>должен включать ismapатрибут.

< HREF = "/ ImageMapper" > < IMG SRC = "image.png" ISMAP /> </ >    

Когда пользователь щелкает внутри изображения, браузер добавит координаты X и Y (относительно верхнего левого угла изображения) к URL привязки в виде строки запроса и получит доступ к полученному URL ^[2] (например, /imagemapper?3,9) .

Если браузер не поддерживает, ismapто строку запроса нельзя добавлять к URL-адресу привязки, и сервер должен ответить соответствующим образом (например, вернув только текстовую страницу навигации).

На стороне клиента [ править ]

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

Чистый HTML [ править ]

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

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

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

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

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

< img  src = "image.png"  alt = "Карта веб-сайта"  usemap = "#mapname"  /> < map  name = "mapname" >  < area  shape = "rect"  coords = "9,372,66,397"  href = "https: //en.wikipedia.org/ "  alt = " Википедия "  title = " Википедия "  /> </ map >

CSS [ править ]

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

Создание и использование [ править ]

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

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

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

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

Изображения SVG [ править ]

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

См. Также [ править ]

• Загадочная мясная навигация

Ссылки [ править ]