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

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

Плюсы

• Карты-изображения позволяют задать любую форму области ссылки, что особенно пригодится для указания географического района. Поэтому, карты-изображения применяются наиболее часто в географической тематике.
• С одной картинкой удобнее работать — не приходится заботиться о состыковке отдельных фрагментов при разрезании, и рисунок легко можно поместить в нужное место.

Минусы

• При сложной форме области ссылки увеличивается объём кода HTML. Контур аппроксимируется набором прямых отрезков, для каждой точки такого отрезка следует задать две координаты, а общее количество таких точек может быть достаточно велико.
• Соответственно, увеличивается сложность задания координат. Вручную их указывать не удобно, поэтому приходится пользоваться специальными программами, которые визуально показывают области и позволяют их редактировать.
• При смене изображения, например, при увеличении масштаба придётся заново задавать координаты всех областей ссылок.
• К картам-изображениям нельзя применять разные эффекты, которые доступны при разрезании одного рисунка на фрагменты: эффект перекатывания, частичная анимация, индивидуальная оптимизация картинок для их быстрой загрузки.
• Нет чётко выделенных границ ссылок. Поэтому эти границы приходится выделять разными средствами непосредственно на изображении. Если рисунок не загрузился по каким-либо причинам, то разобраться в наборе ссылок становится весьма проблематично.

С позиции удобства пользователей карты-изображения имеют только одно преимущество — включение ссылок разнообразной формы. Это добавляет наглядность в представлении информации — мы не ограничены прямоугольной формой ссылки и можем использовать ссылки сложной конфигурации для своих целей.

Карты-изображения реализуются в двух различных вариантах — серверном и клиентском. В случае применения серверного варианта браузер посылает запрос на сервер для получения адреса выбранной ссылки и ждёт ответа с нужной информацией. Такой подход требует дополнительного времени на ожидание результата и отдельные файлы для каждой карты-изображения.

В клиентском варианте карта располагается в том же HTML-документе, что и ссылка на изображение. Для указания того, что изображение является картой, применяется атрибут usemap элемента <img>. В качестве значения используется указатель на описание конфигурации карты, которая устанавливается с помощью элемента <map>. Значение атрибута name у <map> должно соответствовать имени в usemap. При этом значение usemap в <img> начинается с символа решётки (пример 1).

Пример 1. Создание карты-изображения

Внутри контейнера <map> располагается один или несколько элементов <area>, они задают форму области, её координаты, устанавливают адрес документа, на который следует сделать ссылку, а также всплывающую подсказку.

Элемент <area> имеет следующие атрибуты.

• shape — определяет форму активной области. Форма может быть в виде окружности (circle), прямоугольника (rect), полигона (poly).
• alt — добавляет альтернативный текст для каждой области. Служит лишь комментарием для ссылки, поскольку на экран не выводится. Обязательный атрибут при наличии href.
• title — выводит всплывающую подсказку при наведении курсора на область.
• href — задаёт адрес документа, на который следует перейти, по своему действию аналогичен подобному атрибуту элемента <a>.
• coords — задаёт координаты активной области. Координаты отсчитываются в пикселях от левого верхнего угла изображения, которому соответствует значение 0, 0. Первое число является координатой по горизонтали, второе — по вертикали. Список координат зависит от формы области.

Для окружности задаются три числа — координаты центра круга и радиус.

<area shape="circle" coords="230, 340, 100" href="circle.html" alt="">

Для прямоугольника — координаты левого верхнего и правого нижнего угла.

<area shape="rect" coords="24,18, 210, 56" href="rect.html" alt="">

Для полигона задаются координаты его вершин, как показано на рис. 1.

Рис. 1. Координатные точки для полигона