Читайте также:
|
В рассмотренных ранее графических ссылках одному изображению соответствовал один адрес ссылки. Однако существует возможность сопоставить одному изображению несколько ссылок, привязав каждую из них к некоторой области изображения. Такие области называют горячими или активными, а сам технологический прием - графической картой ссылок или сегментированной графикой. Горячие области графической карты могут быть различной формы: прямоугольной, многоугольной или в виде круга. Это очень удобный способ оформления группы ссылок, однако при выборе рисунка, служащего основой карты ссылок, следует стремиться к тому, чтобы границы "горячих" областей были хорошо очерченными и не пересекались. Кроме того, необходимо позаботиться о том, чтобы пользователь понял, что имеет дело с картой ссылок, а не просто с графическим фоном. Для этого можно предусмотреть поясняющие тексты. При наведении на "горячую" область указатель мыши изменяет свою форму как и при обычных ссылках. При щелчке на "горячей" области ее границы становятся видимыми.
Возможны два варианта реализации графических карт ссылок: клиентский и серверный. В первом варианте вся информация о конфигурации графической карты ссылок размещается в HTML-документе, в котором она применяется. Во втором варианте предполагается наличие так называемого CGI-сценария, который располагается на сервере и выполняет обработку запросов браузера клиента при работе с графической картой ссылок. Кроме того, на сервере должен находиться конфигурационный файл, в котором описываются горячие области карты. Хотя серверный вариант появился раньше, теперь чаще встречается клиентский вариант.
Клиентский вариант графической карты ссылок
Графическую карту ссылок в клиентском варианте задают несколько тегов. Первый - контейнерный тег <mар> (карта) с атрибутом name для указания имени карты. Имя карты выбирается как имя переменной. Далее, между дескрипторами <mар> и </mар> следуют теги <аrеа> (область) для задания горячих областей.
Тег <аrеа> имеет ряд атрибутов, описывающих собственно ссылку, а также форму и положение горячей области:
href - строка, определяющая адрес ссылки;
shape - определяет форму области; принимает аргументы:
1. "rect" или "rectangle"(прямоугольник);
2. "poly" или "polygone"(многоугольник);
3. "circle" (круг);
coords - координаты области, которые задаются в пикселах перечнем чисел, разделенных запятыми; весь перечень заключают в кавычки (для прямоугольника задают четыре числа - координаты верхнего левого и правого нижнего угла; для многоугольника указывают координаты каждого угла; для круга задают три числа - координаты центра и радиус); координаты углов перечисляют в следующем порядке: сначала горизонтальная, а затем вертикальная координата; начало отсчета координат - верхний левый угол изображения в своих исходных размерах (масштабирование изображения назначением параметров width и height может привести к смещению "горячих" областей);
title - текстовая строка всплывающей подсказки, появляющейся при наведении указателя мыши на "горячую" область;
target - указывает окно или фрейм, в котором следует открыть документ, заданный в адресной части ссылки; имеет такие же значения, как и для тега <а>;
nohref="nohref" - атрибут для указания того, что данная область не имеет адреса перехода; атрибуты href и nohref взаимно исключают друг друга (следует использовать только какой-нибудь один из них); атрибут nohref обычно применяется для того, чтобы исключить переход по ссылке для части уже определенной "горячей"области.
После закрывающего дескриптора </mар> следует указать тег, вставляющий изображение и реализующий привязку карты к нему - это уже известный тег <img>, в котором помимо прочих возможных атрибутов задается атрибут связи с картой:
usemap="#имя_карты"
В качестве имени карты приводится значение атрибута name тега <mар>.
В листинге 3 приведен пример графической карты ссылок, в основе которой находится изображение меню (файл map.jpg), показанное на рис. На ней определены три прямоугольные активные области, соответствующие опциям меню. При щелчке на активной области в окне браузера будет выведен соответствующий документ.
Листинг 3. Пример графической карты ссылок:
В теге <аrеа> атрибут target="_blank" указывает браузеру открыть документ в новом окне или в новой вкладке (в зависимости от настроек).
Серверный вариант графической карты ссылок
В серверном варианте реализации графической карты ссылок при щелчке на "горячей" области координаты места щелчка передаются на сервер и обрабатываются серверным сценарием (CGI-программой). Эта обработка заключается, по существу, в обращении к таблице ссылок и поиску в ней URL-адреса документа, сопоставленного координатам щелчка. Если такой адрес будет найден, то он передается браузеру; в противном случае возвращается сообщение о том, что место щелчка не находится в "горячей" области. Таблица соответствий координат всех горячих областей карты и URL-адресов документов хранится на сервере в виде так называемого конфигурационного файла с расширением mар.
Для применения серверного варианта графической карты ссылок в HTML-документе, загружаемом в браузер клиента, используется тег <а>, атрибут href которого содержит адрес конфигурационного файла карты ссылок; внутри тега <а> располагается тег <img>, указывающий на изображение, которое служит основой карты ссылок, и содержащий атрибут ismap:
<а href="адрес_конфигурационного_файла">
<img src="адрес_изображения_карты" ismap="ismap"/>
</а>
примечание. Хорошее правило - сохранение конфигурационного файла и основного графического изображения карты ссылок в одной папке и под единым именем, но с разными расширениями. Конфигурационный файл имеет расширение тар, а изображение карты ссылок сохраняется в любом файле растрового формата, чаще всего GIF, JPEG или PNG.
Конфигурационный map-файл является обычным текстовым файлом, содержащим описание горячих областей графической карты ссылок. Однако форматы представления этих данных могут быть различными. Поэтому перед реализацией серверного варианта карты ссылок следует выяснить у администратора сервера, какой из форматов конфигурационного файла поддерживается. Сейчас существуют форматы конфигурационных файлов CERN и NCSA (аббревиатуры наименований европейского и американского национального научных центров соответственно).
Формат CERN:
тип_области координаты URL-адрес
Тип области:
rect или rectangle - прямоугольник;
poly или polygone - многоугольник;
circle - круг;
default - по умолчанию (область изображения, не являющаяся "горячей").
Координаты х и у углов прямоугольника и многоугольника или центра круга разделяют запятой и заключают в круглые скобки.
Примеры:
rect (50,100) (150,200) http://www.myweb.ru
poly (20,10) (30,5) (100,25) (50,30) http://www.rambler.ru
circle (100,150) 80 http://www.admiral.ru/hp/dunaev
Формат NCSA:
тип_области URL-адрес координаты
Кроме типов областей, принятых в формате CERN, допускается тип point (точечная область). Предполагалось, что в случае нескольких точечных "горячих" областей по щелчку левой кнопкой мыши должна активизироваться та из них, которая ближе к месту щелчка. Однако при наличии областей типа default и point последние можно активизировать только при точном наведении на них указателя мыши, что практически весьма трудно сделать.
Координаты в формате NCSA разделяют запятыми, но не заключают в скобки. При этом круглая область задается несколько иначе, чем в формате CERN: координатами центра и любой точки, лежащей на окружности.
Примеры:
rect http://www.myweb.ru 50,100,150,200
poly http://www.rambler.ru 20,10,30,5,100,25,50,30
circle http://www.myveb.ru 100,150,100,70
Дата добавления: 2015-09-11; просмотров: 87 | Поможем написать вашу работу | Нарушение авторских прав |