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

Известно, что изображения могут выступать в качестве гипертекстовых ссылок. Каждое изображение может представлять собой одну гипертекстовую ссылку. При щелчке на изображении броузер запрашивает гипертекстовую страницу, на которую указывает ссылка, связанная с данными изображением. Если необходимо организовать ссылки на разные документы, то это делается при помощи нескольких изображений, каждое из которых предлагает свой выбор. При использовании карт изображений переход по ссылке зависит от того, на какую часть изображения пользователь указывает при щелчке. Таким образом, одно изображение оказывается вектором с указанием на несколько возможных путей. Применение карт изображений предполагает, что броузер Web каким-то образом взаимодействует с процессором на сервере Web: он должен передавать координаты местоположения курсора при щелчке. Карта изображения состоит из двух файлов: графического файла *.gif, который содержит собственно изображение, и обычного текстового файла *.map в кодировке ASCII, содержащего карту, т.е. перечисление координат областей изображения и вызываемых при выборе данной области URL (гипертекстовых ссылок). Если пользователь щелкает кнопкой мыши, когда курсор располагается на графике, то броузер посылает запрос серверу Web. Упоминаемый в запросе URL - это имя файла с картой (*.map) для использования выполняющейся на сервере Web программы обработки карты изображения. Координаты задаются в пикселях (элементах картинки), причем верхний левый угол изображения имеет координаты (0,0). Кроме того, броузер присоединяет к URL координаты курсора в момент щелчка. Чтобы определить попадание координат в одну из заданных областей, программа обработки карты изображения (программа CGI на сервере Web) берет указанные координаты и обращается к файлу с картой. В случае попадания программа смотрит (также в файле с картой) URL соответствующего документа, извлекает его и передает броузеру.

На рисунке 3.4 приведен пример карты изображения, как она видится в окне броузера, сохраненной в GIF-формате в файле sample.gif.

Рис. 3.4. Пример карты изображения

Приведенный рисунок разбит на несколько областей - например, CIRCLE и RECT. Белый фон также является областью. В броузере Web пользователь может переместить курсор в одну из областей и щелкнуть кнопкой мыши. Так как это карта изображения, щелчок на круге приведет к переходу по ссылке к HTML-документу circle.htm. Если, вместо этого, пользователь щелкает на многоугольнике , то он переходит в документ polygon.htm и т.д. Пример составлен таким образом, что если пользователь щелкает на графике вне выделенных областей, то он получает документ по умолчанию, который называется misc.htm. Заметим, что выбирать имена документов в соответствии с формой области вовсе необязательно. Теперь рассмотрим как же вставить карту изображения в Web страницу. Это делается следующей HTML-строкой:

<AHREF="/SAMPLES/IMAGES/sample.map"> <IMGSRC="SAMPLES/IMAGES/sample.gif" border=0 ALIGN="BOTTOM" ISMAPBORDER=0></A>

Важнейшее слово здесь - ISMAP, которое сообщает броузеру Web, что это карта изображения. Первая часть строки, <AHREF="/SAMPLES/IMAGES/sample.map">, обозначает имя файла с картой (sample.map); к данному файлу Web-сервер будет обращаться для выбора гипертекстовой ссылки, зависящей от того, в каком месте изображения пользователь щелкнул кнопкой мыши. Вторая часть строки, <IMGSRC="SAMPLES/IMAGES/sample.gif" border=0 ALIGN="BOTTOM" ISMAPBORDER=0>, сообщает броузеру имя графического файла (sample.gif), который он должен вывести на экран. Как всегда, ссылка может указывать на файл на совершенно другом Web-сервере, но при этом необходимо указать полный адрес URL, включая имя сервера и полный путь. Теперь рассмотрим, что содержит файл с картой для данного примера. Ниже приведено его содержание:

default /samples/misc.htm circle (110,107) (204,107) /samples/circle.htm oval (15,215) (197,274) /samples/oval.htm poly (248,23)(462,54)(334,78) (342,184)(510,184) (502,244) (226,278) /samples/polygon.htm rect (356,110) (516,173) /samples/rect.htm

Первая строка содержит URL по умолчанию - это URL документа, извлекаемого, когда пользователь щелкает на изображении вне определенных областей. В данном примере это документ с именем misc.htm. Формат файла с картой зависит от используемых Web-сервера и программы обработки карт изображений, но, как правило, каждой области соответствует одна строка. Первым элементом каждой строки является тип области (прямоугольник, многоугольник, круг или овал). После описания типа области необходимо указать координаты ее границы. В случае прямоугольника - это координаты левой верхней и правой нижней вершин; в случае многоугольника - координаты всех вершин многоугольника; в случае круга - координаты центра плюс координаты какой-либо точки на окружности; в случае овала - верхняя левая и правая крайняя координаты. Последний элемент строки - это URL извлекаемого документа при выборе области.

Обычно многие броузеры имеют поле, в котором при указании курсором на гиперссылку можно увидеть URL извлекаемого документа при щелчке на данной ссылке. Это справедливо и для карт изображений. Разница в том, что в случае карт изображений виден расширенный URL не только с именем файла, но и со знаком вопроса и следующей за ним парой чисел, разделенных запятой (например, http:\\SAMPLES/IMAGES/sample.map?278,49). Эти два числа соответствуют текущим координатам курсора, причем они меняются при перемещении мыши. Перемещая курсор, можно определить границы всей охватываемой картой изображения поверхности. (Определить, на какие области разделено все изображение, нельзя - эта информация находится в файле с картой на Web-сервере. Однако графика дает подсказку сама по себе.) При щелчке где-либо в пределах карты изображений, вся строка - в том числе имя файла, знак вопроса и координаты курсора - посылается в качестве запроса для получения документа. Файлы с картами изображений хранятся в особом каталоге на Web-сервере. При поступлении запроса сервер определяет по имени каталога, что это запрос к карте изображений, и передает URL-кодированные данные программе обработки изображений (CGI-программе). Программа анализирует данные на предмет определения запрашиваемого файла с картой и координат курсора в момент щелчка кнопкой мыши. После этого она берет файл с картой и сравнивает координаты курсора с картой изображения для определения области, в которой курсор находился при щелчке, и соответствующего URL. Затем программа сообщает Web-серверу, какой документ он должен извлечь, а Web-сервер посылает его броузеру.

Создав изображение, необходимо составить его карту. Рассмотрим основные этапы создания карты изображений:

Создание изображения при помощи программы рисования и задание размера изображения с учетом того, как оно должно выглядеть в броузере. При создании и редактировании изображений рекомендуется устанавливать разрешение экрана равным 640х480 точек на дюйм.
Написание кода HTML для документа, в который планируется поместить карту изображения.
Подготовка файла с картой. Точные координаты еще неизвестны, но этого пока и не нужно - для начала можно ввести любые.
Запись HTML-документа, графики и файла с картой в соответствующие каталоги на Web-сервере.
Загрузка документа в броузер Web. Когда пользователь помещает курсор на карте изображения, броузер показывает координаты курсора. Необходимо просто перемещать курсор и запоминать координаты (x,y) для тех областей, которые пользователь хочет определить. Кроме того, необходимо решить, какая форма (круг, прямоугольник и т.д.) наиболее подходит для каждой области. Нужно записать координаты, загрузить файл с картой в какой-нибудь текстовый редактор и отредактировать его в соответствии с выписанными координатами.
Тестирование отредактированного файла с картой из Web-броузера в целях проверки правильности вызова документов при щелчке на той или иной области изображений.

Данный пример подходит к требованиям InternetInformaitionServer компании Microsoft. Не всякий сервер поддерживает карты изображений, так что это необходимо проверить в документации Web-сервера. Разные Web-серверы используют разные каталоги по умолчанию для хранения таких файлов, как карты изображений.

Приведенное выше описание карты изображений соответствует формату группы CERN, другой распространенный формат - от центра NCSA.

В настоящее время помимо серверной поддержки карт изображений (способ ISMAP) броузеры могут описывать с помощью HTML 3.2 и обрабатывать карты на стороне клиента (способ USEMAP). Клиентский вариант обработки карт более эффективен, не требует вызова программы на сервере и сокращает время отклика на действия пользователя.

Для задания карты изображений используется контейнер MAP и тег AREA. Контейнер MAP содержит описание активных областей и ссылок. Имя контейнера служит для указания его в атрибуте USEMAP тега включения изображения IMG. Тег AREA определяет форму области (атрибут SHAPE), координаты характерных ее точек (COORDS) и гиперссылки (HREF).

Для нашего примера описание карты изображений будет иметь следующий вид:

<IMG SRC=imagemap.gif USEMAP=#MY_MAP> <MAP NAME=MY_MAP> <AREA SHAPE=circle COОRDS="110,107,204,107" HREF=/samples/circle.htm> <AREA SHAPE=oval COORDS="15,215,197,274" HREF=/samples/oval.htm> <AREA SHAPE=poly COORDS="248,23,462,54,334,78, 342,184,510,184,502,244,226,278" HREF=/samples/polygon.htm> <AREA SHAPE=rect COORDS="356,110,516,173" HREF=/samples/rect.htm> </MAP>

Другой способ поддержки карт на клиенте, не нашедший широкого распространения, основан на применении контейнера FIG и расширении гиперссылки за счет указания формы области.

Содержание раздела