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

Клиентский вариант позволяет разместить все данные об активных областях карты-изображения в самом 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 с самых ранних версий.