Типы карт-изображений

Как уже было сказано, карты-изображения могут быть реализованы в двух вариантах – серверном и клиентском. Рассмотрим подробно каждый из них.

Серверный вариант

Серверный вариант реализации карты-изображения (Server-Side Imagemap) подразумевает, что документ, в котором прописаны координаты областей, находится на самом Web-сервере.

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

В случае если конфигурационный файл не содержит данных об искомой активной области, выводится сообщение об отсутствии данного документа. Для того чтобы браузер определил графический объект как карту-изображение, необходимо в теге <img>, описывающем конфигурацию кар­ты-изображения, указать параметр ismap, а файл конфигурации сохранить в формате MAP.

Серверный вариант поддерживает два формата реализации карт-изображений – CERN и NCSA.

Первый разработан научным центром European Organization for Nuclear Research и предлагает следующую запись координат активных областей:

тип_области координаты адрес

Значения пар координат разделяются запятой и заключаются в круглые скобки, например:

rect (54, 127) (445, 344) http://www.site.ru/

В начале конфигурации стоит значение rect (прямоугольное выделение для задания активной области). Другими значениями могут быть: circle (крут), poly (многоугольник) и default (значение по умолчанию).

Формат NCSA разработан центром приложений для суперкомпьютеров National Center for Supercomputing Applications и предлагает несколько иной формат записи конфигурации карт-изображений:

тип_области адрес координаты

Координаты х, y тоже разделяются запятыми, но в скобки не заключаются, например:

rect http://www.site.ru/ 54, 127 45, 344

Кроме типов областей, предложенных CERN, данный формат разрешает использование типа point (активизируется та ссылка после нажатия, кото­рая обозначена ближе всего к точке соприкосновения).

Клиентский вариант

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

Размещать файл конфигурации на Web-сервере не нужно – координаты активных областей указываются в самом документе, куда встроен графиче­ский объект для карты-изображения. При использовании клиентского вари­анта (Client-Side Imagemap) в тег <img> добавляется параметр usemap.

В связи с тем, что клиентский вариант на сегодня распространен более ши­роко и к тому же более доступен, подробно рассмотрим процесс конфигура­ции карты-изображения на примере Client-Side Imagemap.

<MAP> </map>

Для определения конфигурации активных областей карты-изображения ис­пользуется специальный тег-контейнер <мар> с параметром name, который должен соответствовать свойству параметра usemap в теге <img>. Внутри него опреде­ляются области карты при помощи элементов <AREA>, и задается имя карты при помощи атрибута:

name="Имя"

Необходимо отметить, что описание карты-изображения следует сразу же после указания тега рисунка <img>:

<IMG scr=”picture.gif” usemap="#mymap"

<MAP name="mymap"

Координаты активных областей…

</MAP>

< AREA >

Описание активных областей карты-изображения осуществляется с помо­щью тега <area>, не требующего за собой закрывающего тега.

Тег <area> может включать следующие параметры:

· shape – определяет форму активной области.

Атрибуты, определяющие форму области на карте, являются обязатель­ными. Существует три стандартных вида областей: круг (circle), прямоугольник (rect) и многоугольник произвольной формы (polygon).

Для круга необходимо задать координаты центра и радиус (R), выражен­ные в пикселях. Координаты центра отсчитываются от левого (X) и верхнего (Y) краев рисунка. Шаблон для задания круговой области таков:

shape = "circle" coords = X,Y,R

Для определения области произвольной конфигурации задают координа­ты (X,Y) каждого из углов многоугольника, который точно или приблизи­тельно соответствует по форме этой области:

shape = "poly" coords = X1,Y1,X2,Y2,X3,Y3,...

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

shape = "rect" coords = X1,Y1,X2,Y2

Описание областей карты и соответствующий эле­мент IMG могут размещаться в разных частях страницы. Переходы, выполня­емые с помощью карты, могут происходить как внутри страницы, так и к удаленному ресурсу.

· coords – осуществляет выбор конкретной активной области и содержит значения пар координат. Начало координат размещается в верхнем левом углу графического изображения, которому соответствует начальное значение 0, 0.

· target – используется при работе с фреймами.

· alt – действие параметра аналогично использованию его в обычных гиперссылках на основе графических указателей (альтернативный текст);

alt ="Текст подсказки"

· href – наличие гиперссылки для данной области.

href ="Протокол: //Адрес ссылки"

· nohref – отсутствие гиперссылки для данной области.

С изображениями карт удобно работать в стандартном для Windows редакторе Paint. Для него изображение должно быть представлено в фор­мате BMP. Этот редактор позволяет использовать сетку в режимах увеличения. Ее можно включить или отключить при помощи комбинации клавиш CTRL+G. После выбора инструмента Выделение указатель мыши приобретает вид тонко­го крестика. Таким образом, указатель можно легко установить с точностью до одного пикселя. В строке состояния редактора будут указаны координаты курсора относительно верхнего левого угла рисунка. Значения координат со­ответствуют требуемым для атрибута coords величинам и идут в том же порядке (X,Y).

Если первоначально изображение создано не в формате GIF, то его мож­но конвертировать в этот формат, используя любой графический редактор, поддерживающий такой тип файлов. Например, MS Photo Editor, входящий в состав Microsoft Office, или Paint Shop Pro фирмы JASK. Достаточно от­крыть графический файл в редакторе и сохранить его (выполнить команду Save As) в формате GIF.

Реальные карты, созданные с использованием самых разнообразных гра­фических пакетов, смотрятся очень привлекательно. Часто области не име­ют четких границ, и неискушенному пользователю «мышечувствительная» карта может показаться последним достижением в области разработки про­грамм или, по крайней мере, хитро придуманным трюком. На самом же деле возможность использования карт была заложена в HTML с самых ранних версий.