2. Графические и комбинированные ссылки

Ссылку, указатель которой является картинкой, называют графической. Ее струк­тура имеет вид:

<а href ="адес_ссылки"> <img src="адрес_графического_файла"/></а>

Например, следующий тег описывает ссылку на (Х)НТМL-файл мой_документ.htm, при этом ссылка на экране будет представлена изображением из файла picture.gif:

<а href="мой_документ.htm"><img src="picture.gif"/></a>

Графическое изображение внутри ссылки по умолчанию выводится на экран в рамке такого же цвета, каким выделяются текстовые ссылки. Цвет рамки около изображения графических ссылок в различных состояниях (активная, посещенная и т. п.) можно установить в настройках браузера или в таблице CSS посредством параметра color так же, как и для текстовых ссылок. Чтобы исклю­чить окаймление изображения в графической ссылке, достаточно применить пара­метр text-decoration:none.

3. Графические карты ссылок

В рассмотренных ранее графических ссылках одному изображению соответст­вовал один адрес ссылки. Однако существует возможность сопоставить одному изображению несколько ссылок, привязав каждую из них к некоторой области изо­бражения. Такие области называют горячими или активными, а сам технологиче­ский прием - графической картой ссылок или сегментированной графикой. Горя­чие области графической карты могут быть различной формы: прямоугольной, многоугольной или в виде круга. Это очень удобный способ оформления группы ссылок, однако при выборе рисунка, служащего основой карты ссылок, следует стремиться к тому, чтобы границы "горячих" областей были хорошо очерченными и не пересекались. Кроме того, необходимо позаботиться о том, чтобы пользова­тель понял, что имеет дело с картой ссылок, а не просто с графическим фоном. Для этого можно предусмотреть поясняющие тексты. При наведении на "горячую" об­ласть указатель мыши изменяет свою форму как и при обычных ссылках. При щелчке на "горячей" области ее границы становятся видимыми.

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

3.1. Клиентский вариант графической карты ссылок

Графическую карту ссылок в клиентском варианте задают несколько тегов. Первый - контейнерный тег <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" указывает браузеру открыть документ в новом окне или в новой вкладке (в зависимости от настроек).