Гиперссылки
В качестве носителя гиперссылки может выступать не только текст, но и графическое изображение. Для этого необходимо тег, объявляющий вставку графики в состав содержимого Web-страницы, поместить между тегами <а> и </а>. Но дело в том, что на графическое изображение мы можем "навесить" не одну, а несколько гиперссылок, т. е. в пределах картинки выделяется несколько активных областей, нажатие мышью на каждую из которых активирует соответствующую гиперссылку. Подобная технология называется сегментированной графикой.
Для создания подобных графических изображений, связанных с несколькими гиперссылками, применяются специализированные теги. Сначала объявляются активные области рисунка, называемые также сегментами. Вся их совокупность составляет карту активных сегментов рисунка, которой присваивается некое имя. А затем это имя карты связывается с самим изображением, объявляемым при помощи тега <img>. Рассмотрим типичный пример.
Листинг 1.17
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/htm!4/strict.dtd"><html> <head> <title>Сегментированная графика</title></head> <body> <p>Это обычный текст. <img srce "redhood.gif" usemap="#map1" ALT="docs"> </p> <map name="map1"> <area href="1.htm" shape="rect" coords="1, 1, 10, 10" ALT="1">. <area href="2.htm" shape="circle" coords="20, 20, 5" ALT="2"> <area href="1.htm" shape="poly" coords="0, 111, 30, 10, 35, 1, 50, 1, 30" ALT="3"> </map></body> </html>В этом примере видно, что при объявлении рисунка, в тег <img> мы вставляем параметр usemap, значением которого является наименование карты активных сегментов рисунка, связанных с гиперссылками. Перед наименованием используемой карты активных сегментов вставляется символ решетки. Описание этой карты помещается между тегами <тар> и </тар>. При этом у открывающего тега <тар> существует обязательный параметр name, значением которого является наименование карты.
Карта состоит из описания сегментов. Каждый сегмент описывается при помощи одного тега <агеа>. Мы можем применять активные сегменты трех различных форм: прямоугольники, круги и многоугольники. Форма задается при помощи обязательного параметра shape. В качестве значения данного параметра мы можем использовать одно из трех предустановленных значений.
- Значение rect используется для создания прямоугольных активных областей.
- Значение circle используется для создания кругового сегмента.
- Значение poly позволяет создавать активные сегменты в виде выпуклых многоугольников.
После того, как мы задали тип формы, следует точно определить их размеры и расположение на нашем графическом изображении. Для этого используется параметр coords, в качестве значения которого записывается перечень координат, определяющих активный сегмент. В листинге 1.17 мы можем увидеть, что координаты в общем списке разделяются обычной запятой. Отсчет координат ведется от верхнего левого угла рисунка, который имеет координаты (0;0).
Для прямоугольных сегментов задаются координаты верхнего левого и правого нижнего угла. А для многоугольников последовательно перечисляются координаты всех точек, в порядке соединения их линиями. Естественно, первая и последняя пара координат должны совпадать, иначе многоугольник окажется незамкнутым, и активный сегмент не будет обрабатываться.
В тег <агеа> входит и параметр href, в качестве значения которого используется URL ресурса, на который указывает гиперссылка данного сегмента.
Но этот параметр, как ни удивительно, не является обязательным. В том случае, когда сегмент создается, но не должен соединятся с гиперссылкой, следует использовать параметр nohref, который не имеет значения.
Но обязательный параметр для тега <агеа> все-таки есть. Это параметр ALT, значением которого является текстовая строка, являющаяся альтернативным представлением рисунка. Как мы знаем, данная строка отображается в виде хинта, когда пользователь наводит курсор мыши на объект. В нашем случае подобным объектом является активный сегмент, внедренный в графическое изображение.
Также в теге <агеа>, как и в тегах обычных гиперссылок, используются параметры tabindex и access key, которые позволяют активизировать гипер-ссылку без использования мыши, при помощи одной лишь клавиатуры. Структуру значений этих параметров мы рассмотрели несколько ранее. Немного отступая от темы, следует заметить, что любой "давильным Web-мастер непременно должен использовать эти параметры, так как только их применение может гарантировать активацию гиперссылок без помощи мыши.
Итак, мы разобрались с применением технологии сегментированной графики. Но о ссылках мы узнали далеко не все. В спецификации HTML определен тег <link>, который создает не привычную нам гиперссылку, а некоторую связь между отображаемым документом и каким-либо дополнительным файлом. Теги <link> могут размещаться только в разделе заголовка HTML-документа, между тегами <head> и </head>.