Карты-ссылки

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

Синонимами термина "карта-ссылка" являются: элемент МАР; изображение-карта; навигационная карта; сегментированная графика; Image Мар.

Карты-ссылки представляют собой графический объект, у которого каждой отдельной области изображения поставлена в соответствие своя гиперссылка. Это дает возможность Web-дизайнерам создавать некоторый образ (метафору), пояснения к отдельным частям которого вызываются щелчком мыши по активному участку изображения. Активные области могут иметь форму прямоугольника, круга или многоугольника (полигона). Карты-ссылки удобно использовать, например, для создания графических меню.

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

Изображение карты-ссылки формируется следующим образом:

usemap-’#plan">

Как видно из приведенной записи, изображение карты-ссылки karta.JPG вызывается аналогично обычному изображению. Лишь атрибут usemap="#plan" говорит о том, что это не обычный рисунок, а изображение, содержащее множество гиперссылок.

Теги <тар пате="Имя карты"> и создают контейнер, внутри которого содержится описание активных областей и указание адресов перехода. "Имя карты" определяется пользователем в момент создания карты. Например, именем карты-ссылки может стать слово plan.

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

Синтаксис атрибутов, ответственных за перечисленные действия, таков:

<агеа alt-'Комментарии" shape-'rect" coords="528,318,603,421" href=" 1 .htm">

В переводе на обыденный язык эта команда будет звучать так: Перейти по ссылке (href) к документу 1 .htm, если произойдет щелчок мышью в прямоугольной области (shape-'rect") с координатами (coords) х 1=528, у 1=318, х2=603, у2=421. При этом, если курсор попадет на указанную активную область (area), то на экране должен появиться альтернативный (alt) текст (в данном случае - это слово Комментарии).

Активные области на изображении карты могут располагаться фрагментарно (часть изображения останется неактивным). Если Web-дизайнер стремится к тому, чтобы при щелчке за пределами активных зон произошел переход к определенному документу, то можно поступить следующим образом. Самым последним следует записать атрибут, который позволит охватить всё изображения карты и указать адрес документа, на который будет происходить переход. Например,

<агеа alt-'Комментарии" shape-'rect" coords="0, 0, xmax, углах" href="fon.htm">

В данном случае координаты прямоугольной области охватывают все изображение (от верхнего левого угла изображения карты-ссылки с координатами 0; 0 до правого нижнего угла с координатами xmax; ушах). Щелчок мышью в неактивных областях изображения вызовет переход к документу fon.htm.

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

Язык HTML позволяет выделять активные зоны изображения с помощью фигур трех видов: прямоугольников, кругов и многоугольников (полигонов). Порядок использования прямоугольника уже был рассмотрен. Заметим лишь, что для активного изображения в виде прямоугольника атрибут shape-'rect" допустимо не указывать (опускать).

Рассмотрим порядок описания активной зоны в виде круга:

В данном случае переход произойдет к документу 16.htm, если выполнить щелчок мышью в круге (shape-'circle"), центр которого имеет координаты х=186, у=81, а радиус R равен 32 пикселям. Альтернативный текст будет содержать единственное слово "Озеро".

Активная область в форме полигона формируется так:

<агеа ак=”Аллея” shape=”POLY” cords=”202,219,203,306,276,297,275,

area alt="Аллея" shape="POLY" coords="202,219,203,306,276,297,275, 219" href=" 14.htm

В данном случае переход произойдет к странице 14.htm. Активная зона имеет форму полигона (shape="POLY"). Описанный полигон представляет собой четырехугольник, однако его углы отличаются от прямых. Аналогично строят полигоны с большим числом сторон (для этого достаточно указать координаты всех вершин многоугольника). Таким образом, с помощью полигона можно сформировать активные области в форме треугольника, четырехугольника, пятиугольника, шестиугольника и т.д.

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

Имеющееся изображение следует подвергнуть стандартной обработке с помощью одного из графических редакторов, например, Adobe Photoshop. При этом необходимо скорректировать перспективу, контрастность, произвести ретуширование, с помощью слоев добавить новые элементы, удалить лишние элементы изображения, произвести заливку неэстетичных участков изображения и т.д.

Выделение активных участков на карте-ссылке (и определение их координат) осуществляется с помощью HTML-редакторов и специальных утилит. Например, можно использовать редакторы HomeSite+, Dreamweaver, утилиты MapEdit 2.44, Live Image и др.

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

С помощью атрибута типа

area аИ="Вид сверху" coords="0,0,700,514" href="20.htm" вызывается изображение в тех случаях, когда не выбран ни один из активных участков изображения карты.

Краткие выводы

Карты ссылки дают возможность создавать разнообразные графические меню с большим числом гиперссылок.