Ссылки-картинки

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

Используя в качестве гиперссылки картинку, следует помнить об одной особенности, уже упоминавшейся в главе 8: если у обычных изображений по умолчанию рамка отсутствует, то изображения, "по совместительству" служащие гиперссылками, по умолчанию заключаются в черную рамку толщиной 2 пикселя. Это далеко не всегда выглядит так эстетично, как, возможно, замышляли разработчики стандарта. Поэтому дескрипторы <IMG> таких изображений обычно снабжаются параметром border=0.

Последний вариант, - когда разные фрагменты одного изображения служат ссылками на различные объекты, - встречается сплошь и рядом. Действительно, это представляется естественным, особенно если мы хотим, чтобы у зрителя складывалось целостное представление о странице. Такие объекты - одно изображение на несколько ссылок - описываются картами изображений (image map). Что такое карта изображения? Представим себе, что у нас есть картинка (рис. 9.5), разные объекты которой должны служить ссылками на разные Web-страницы. (На самом деле это изображение взято из мультимедийной версии Британники, но мы же можем помечтать, вообразив себя разработчиками электронной энциклопедии на базе HTML, верно?) Что нам нужно, чтобы сделать задуманное, не разрезая изображение на части?

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

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

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

Для создания карты изображения используется конструкция, состоящая из де-жриптора <МАР> и "вложенных" в него дескрипторов <AREA>. Дескриптор <МАР> (от шглийского тар - "карта") определяет собственно карту изображения целиком, а дескрипторы <AREA> (от английского area - "область", "зона") описывают отдельные области этой карты. Следовательно, дескриптор <МАР> является парным, а <AREA> - непарным. Вся же конструкция выглядит примерно так:

<МАР параметры харты>

<AREA параметры областй>

<AREA>параметры другой областИ>

</МАР>

Какие параметры есть у всей области? Размеры? Положение? Но все эти свойства определяется самой картинкой, так что описывать их заново нет смысла. Достаточно связать карту изображения с самим изображением. Именно за это "отвечает" единственный параметр дескриптора <МАР> - name. Благодаря ему карте присваивается уникальное имя, которое потом указывается в дескрипторе <IMG> с помощью специального параметра usemap. Таким образом карта изображения как бы "накладывается" на само изображение: <МАР name="mymap">

</МАР>

Имя изображения составляется по тем же правилам, что и другие имена в HTML. Но обратите внимание: при ссылке на него в значении параметра usemap перед именем карты ставится символ I.

Какие параметры у зон, на которые разбивается изображение? О, здесь наши возможности гораздо шире. Прежде всего, с помощью параметра shape мы можем описать форму области: прямоугольник, круг или произвольный многоугольник. Этим формам соответствуют значения rectangle (или сокращенно rect, используется по умолчанию), circle (сокращенно circ) и polygon (сокращенно poly). Маловато? Хочется разнообразия? Не стоит беспокоиться: даже если мы определим зоны действия гиперссылок приблизительно, посетитель страницы, используя такой неточный манипулятор, как мышь, этого не заметит.

Но знать одну лишь форму областей явно мало. Нужно еще описать их размеры и положение. Это делается с помощью параметра coords. Значением этого параметра является заключенный в кавычки список целых чисел. Эти цифры - координаты и размеры области, измеряемые в пикселях. То, как броузер их трактует, зависит от ее формы. Как вы думаете, сколько чисел нужно, чтобы однозначно описать круглую область? Правильно, три: координаты по горизонтали и вертикали (отсчитываются от верхнего левого угла изображения, помните?) и радиус. Именно в таком порядке они перечисляются в списке coords. Например, если нужно описать круг радиусом 40 пикселей, отстоящий от верхнего левого угла изображения на 10 пикселей по горизонтали и 20 пикселей по вертикали, нужно написать такой код:

Вероятно, теперь вы догадываетесь, как описать прямоугольник: просто двумя парами чисел, определяющими координаты его границ. Перечисляются они по часовой стрелке: левая, верхняя, правая и нижняя. Например, прямоугольная область, размером 40x50, отстоящая от верхнего левого угла изображения на 10 пикселей по горизонтали и 20 пикселей по вертикали, описывается таким кодом:

Как задать координаты произвольного многоугольника? Вероятно, вы уже догадываетесь: нужно просто перечислить по очереди координаты всех его вершин. При этом нужно придерживаться только двух правил. Первое: горизонтальная координата задается раньше вертикальной. Второе: для того чтобы фигура получилась замкнутой, последняя пара координат должна дублировать первую. Например, прямоугольный треугольник с вершиной, отстоящей от верхнего левого угла изображения на 10 пикселей по горизонтали и 20 пикселей по вертикали и катетами, равными 40 и 50 пикселей, соответственно, описывается таким кодом:

<AREА shape=poly coords="10, 20, 60, 60, 10, 60, 10, 20" другие параметры >

И еще одно полезное значение параметра shape: default. Что оно означает, если, как мы уже знаем, по умолчанию все области считаются прямоугольными?

Область с параметром shape=default соответствует области, "покрывающей" все изображение. Это очень удобно: сначала задаем ссылку, которая должна работать в тех местах изображения, для которых не созданы ссылки.

Вроде, все. Мы знаем, как задать границы области. Не забыли ли мы чего-то важного?

Ну, конечно: если это область гиперссылки, то где же сама ссылка? Куда переходить после щелчка на этой области? За это в дескрипторе <AREA> "отвечает" тот же параметр, что и в дескрипторе <А> - href. Кроме того, для описания "неактивных" областей, не имеющих своих ссылок, используется параметр nohref. У этого параметра нет значений. Для того чтобы сообщить броузеру, что цанная область не имеет гиперссылки, достаточно написать: <AREA nohref координаты области >

Как и в других дескрипторах HTML, порядок перечисления параметров дескриптора <AREA> не имеет значения. Но порядок описания зон имеет значение: в случае, если эти зоны перекрываются, приоритет имеет та из них, которая была описана первой. В частности, это следует учитывать при описании неактивных зон (с параметром nohref): такие зоны описывают первыми.

Теперь, разобравшись в теории, давайте вернемся к нашей картинке из Британниси. Разбить ее на зоны можно по-разному. Один из вариантов предлагается на Рис. 9.6. Как видим, некоторые зоны перекрываются. И хорошо, что у нас есть правило перекрытия зон, гласящее, что гиперссылка будет работать для зоны, описанной гервой. Иначе некоторые зоны пришлось бы описывать более сложными фигурами. В частности, вместо простого круга, внутри которого находится лупа, мы вынуждены были бы использовать многоугольник с большим количеством вершин.

Описывается такая карта изображения следующим кодом:

<МАР name=britan>

<AREAshape=poly coords="26, 125, 247, 125, 244, 445, 129, 493, 75, 450, 26, 125"

href="home.html">

<AREA shape=poly coords="745, 218, 911, 218, 845, 457, 745, 457, 745, 218"

href="quiz.html">

</MAP>

Осталось "привязать" эту карту к изображению britan.jpg. Для этого поместим в соответствующее место HTML-кода следующий дескриптор: <IMG src="britan.jpg" usemap=britan border=0>

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

А как быть тем посетителям страницы, которые скорости ради отключили отображение картинок в броузере? Смогут ли они пользоваться картами ссылок?

Конечно, не видя картинки, это сделать сложно. Но у нас есть возможность облегчить им жизнь. Для этого нужно воспользоваться тем же средством, что и при отображении обычных картинок - параметром alt. Но указывается он не в дескрипторе <IMG> (точнее, по крайней мере, не только в нем), а в дескрипторах <AREA> (рис. 9.7).

<МАР name=britan>

<AREA shape=poly coords="20,70,170,70,170,305,110,335,55,305,20,70" href="home.html"

alt="3acTaBKa">

<AREA shape=poly coords="510,160,620,160,575,320,505,320,510,160" href="quiz.html"

аlt="Викторина">

< AREA shape=circ coords="255,365,63" href=search.html" alt="Поиск">

<AREA shape=rect coords="240,450,410,470" href="audio.html" alt="3ByKOBoe сопровождение'^

</MAP>

В дескрипторе <AREA>, как и в обычной гиперссылке, описанной дескриптором <А>, действует параметр target. Подробнее о нем читайте в главе 11.

Другой распространенный способ разбить изображение на несколько областей, каждая из которых ссылается на отдельный объект, заключается в физическом разделении этого изображения на несколько графических файлов, в каждом из которых содержится своя часть изображения: Затем эти части помещаются в таблицу (см. главу 10). Как легко догадаться, главный недостаток такого способа - то, что полученные области могут быть только прямоугольными. Однако изображение, разбитое на более мелкие файлы, быстрее загружается.

Вернуться на главную