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

Как связать части изображения с различными страницами Web.

РАСПЕЧАТКА 1 - HOME.HTM

РАСПЕЧАТКА 2 - SAMPLE MAP

Знакомясь с технологией Web, мы узнали, как гипертекстовые ссылки организованы в HTML, когда щелчок на гиперссылке приводит к переходу на другую страницу. Гиперссылками могут быть и изображения. При наличии якоря для данного изображения щелчок на нем приводит к тому, что браузер запрашивает гипертекстовую страницу, на которую якорь указывает.

Каждое изображение может представлять собой одну гипертекстовую ссылку. При щелчке на данном изображении вы переходите к указанному документу. Если вы хотите, например, организовать ссылки на разные документы, то это можно сделать при помощи трех или четырех мелких изображений (иными словами, пиктограмм), каждое из которых предлагает иной выбор.

Сегодня мы поговорим о другом методе - о картах изображений. В этом случае переход по ссылке зависит от того, на какую часть изображения вы указываете при щелчке. Таким образом, одно изображение оказывается вектором с указанием на несколько возможных путей. Применение карт изображений предполагает, что браузер Web каким-то образом взаимодействует с процессом на сервере Web: он должен передавать координаты местоположения курсора при щелчке.

ЗАФИКСИРУЙТЕ ИЗОБРАЖЕНИЕ

На рисунке приводится карта изображения, как она видна в окне браузера Netscape Navigator. Для этого примера мы создали (почти полноэкранное) графическое изображение и сохранили его в формате .gif в файле sample.gif. Обратите внимание, что рисунок разбит на несколько областей - например Circle City и Squaresville. Бледно-желтый фон также является областью.

В браузере Web читатель (т. е. тот, кто путешествует по Web) может переместить курсор в одну из областей и щелкнуть кнопкой мыши. Так как это карта изображения, щелчок на круге приведет к переходу по ссылке к HTML-документу circle.htm. Если, вместо этого, пользователь щелкает на многоугольнике, то он переносится в документ poly.htm. Наш пример составлен таким образом, что если пользователь щелкает на графике вне выделенных областей, то он получает документ по умолчанию (этот документ мы назвали misc.htm). Заметим, что выбирать имена документов в соответствии с формой области вовсе не обязательно.

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

<A HREF="/samples/IMAGES/sample.map"><IMG SRC=
"/samples/images/sample.gif" ALIGN= "BOTTOM" ismap border=0 ></A> 

Это ключевая строка для всего примера в целом, а важнейшее слово в ней - ISMAP. ISMAP сообщает браузеру Web, что это карта изображения. Первая часть строки, <A HREF= "/samples/IMAGES/sample.map">, обозначает имя файла с картой; к данному файлу сервер будет обращаться для выбора гипертекстовой ссылки, зависящей от того, в каком месте изображения пользователь щелкнул кнопкой мыши. Вторая часть строки, <IMG SRC="/samples/images/sample.gif" ALIGN="BOTTOM" ismap border=0>, сообщает браузеру имя графического файла, который он должен вывести на экран. В данном примере имя файла - sample.gif. Как всегда, ссылка может указывать на файл на совершенно другом сервере Web, но при этом вы должны указать полный адрес URL, включая имя сервера и полный путь.

Если пользователь щелкает кнопкой мыши, когда курсор располагается на графике, то браузер посылает запрос серверу Web. Упоминаемый в запросе URL - это имя файла с картой для использования выполняющейся на сервере Web программой обработки карты изображения; файлы с картой - обычные текстовые файлы в кодировке ASCII с перечислением координат областей изображения и вызываемых при выборе данной области URL. Координаты задаются в пикселах (элементах картинки), причем верхний левый угол изображения имеет координаты (0,0).

Кроме того, браузер присоединяет к URL координаты курсора в момент щелчка. Чтобы определить попадание координат в одну из заданных областей, программа обработки карты изображения (т. е. программа CGI на сервере Web) берет указанные координаты и обращается к файлу с картой. В случае попадания программа смотрит (также в файле с картой) URL соответствующего документа, извлекает его и передает браузеру.

ПРОСТЕЙШАЯ КАРТА

Распечатка 2 показывает файл с картой для данного примера. Файл был назван нами sample.map. Первая строка sample.map содержит URL по умолчанию - это URL документа, извлекаемого, когда пользователь щелкает на изображении вне определенных областей. В данном примере это документ с именем misc.htm.

Формат файла с картой зависит от используемых сервера Web и программы обработки карт изображений, но, как правило, каждой области соответствует одна строка. Первым элементом каждой строки является тип области (прямоугольник, многоугольник, круг или овал).

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

Последний элемент строки - это URL извлекаемого документа при выборе области.

ЧТЕНИЕ КАРТ

Карты изображений в World Wide Web используются часто, поэтому при путешествии по Web можно найти множество примеров. Многие браузеры Web имеют поле, в котором при указании курсором на гиперссылку вы можете увидеть URL извлекаемого документа при щелчке на данной ссылке. Это справедливо и для карт изображений. Разница в том, что в случае карт изображений вы видите расширенный URL не только с именем файла, но и со знаком вопроса и следующей за ним парой чисел, разделенных запятой. Эти два числа соответствуют текущим координатам курсора, причем они меняются при перемещении мыши. Перемещая курсор, вы можете определить границы всей охватываемой картой изображения поверхности. (Определить, на какие области разделено все изображение, нельзя - эта информация находится в файле с картой на сервере Web. Однако графика дает вам подсказку сама по себе.)

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

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

КАК СОСТАВИТЬ КАРТУ

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

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

Во-вторых, написание кода HTML для документа, в который вы собираетесь поместить карту изображения. (Этот этап соответствует Распечатке 1.)

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

Запись HTML-документа, графики и файла с картой в соответствующие каталоги на сервере Web.

Загрузка документа в браузер Web. Когда вы помещаете курсор на карте изображения, браузер показывает координаты курсора. Не щелкайте мышью - просто перемещайте курсор по изображению и запоминайте координаты (x,y) для тех областей, которые вы хотите определить. Кроме того, необходимо решить для себя, какая форма (круг, прямоугольник и т. д.) наиболее подходит для каждой области. Запишите координаты, загрузите файл с картой в какой-либо текстовый редактор и отредактируйте его. Не забудьте проверить правильность каждого URL.

Наконец, тестирование отредактированного файла с картой из браузера Web в целях проверки правильности вызова документов при щелчке на той или иной области изображения. В случае неправильного вызова карту придется заново отредактировать. Если же все хорошо, то можете считать себя картографом!

В приведенном примере мы использовали Internet Information Server 2.0 компании Microsoft под Windows NT Server 4.0. Не всякий сервер поддерживает карты изображений, так что прежде, чем применять собственные карты, посмотрите, есть ли в документации сервера необходимая поддержка. Разные серверы Web используют разные каталоги по умолчанию для хранения таких файлов, как карты изображений; поэтому вам придется опять обратиться к документации для определения каталога, в который указанные файлы должны быть помещены. Синтаксис для якорей карт изображений и файлов с картами тоже может различаться, так что и здесь без документации не обойтись.

РАСПЕЧАТКА 1 - HOME.HTM

<HTML> 

<HEAD> 

<TITLE>LAN TUTORIAL: IMAGEMAP TEST</TITLE> 

</HEAD> 

Этот пример показывает, как работает карта изображения. Нижеследующее изображение представляет собой графику в формате .GIF. Поместите курсор на одну из фигур в рисунке и щелкните левой кнопкой мыши.

<A HREF="/samples/IMAGES/sample.map"><IMG
 SRC="/samples/images/sample.gif"
 ALIGN="BOTTOM" ismap border=0 ></A>

<HTML> 

РАСПЕЧАТКА 2 - SAMPLE MAP

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