Иллюстрированный самоучитель по созданию сайтов

Изображение-карта

Между тегами <МАР> и </МАР> должна находиться основная часть карты. Она состоит из нескольких тегов <AREA>, каждый из которых определяет активную область рисунка. (При щелчке мыши на “актив ных областях” может происходить перемещение по гиперссылке, а остальная часть изображения ничем не отличается от обычного рисунка.). В данном случае нам нужно определить три такие “активные области”: изображение монитора, компьютера и дисковода.

“Активные области” могут быть либо прямоугольной формы, либо круглой, либо многоугольной. Это определяется установкой значения атрибута SHAPE= в теге <AREA> (он употребляется без закрывающего тега). Если значение этого атрибута – "rect", область будет прямоугольной, если "circle" – круглой, а если "poly" – многоугольной.

Дальше начинается самое неприятное в составлении карты графических ссылок: нужно определить координаты каждой из активных областей и записать их как значения атрибута COORDS=.

Если “активная область” прямоугольная, то следует указать координаты левого верхнего ее угла и правого нижнего. Местоположение любой точки на рисунке может быть определено с помощью двух чисел – ее горизонтальной и вертикальной координат. Самая левая верхняя точка на рисунке имеет координаты “0.0”. Чем больше горизонтальная координата, тем правее расположена точка, и, соответственно, чем больше вертикальная координата, тем точка ниже. Например, если рисунок имеет размер 400х300 точек и нам нужно определить прямоугольную активную область, занимающую его левый верхний угол и имеющую половину ширины и высоты рисунка, мы должны будем написать следующее:

В этой записи атрибут COORDS= определяет прямоугольник с помощью двух точек: одна из них имеет координаты “0.0”, то есть левый верх ний угол, а другая – “ 200.150”, то есть это центральная точка рисунка размером 400х300.

Если “активная область” круглая, то задача немного упрощается: нужно определить координаты только одной точки – центра окружности, а также указать ее радиус, например:

Такая запись определяет круглую “активную область”, расположенную в центре нашего гипотетического рисунка размером 400х300 (координаты центральной точки– “200.150”). Окружность имеет радиус 40 точек.

И, наконец, самый сложный и наиболее часто встречающийся случай – многоугольная “активная область”. Здесь нужно последовательно указать координаты всех углов многоугольника. Поскольку таких углов может быть очень много, то и значение атрибута COORDS= при обретает угрожающие размеры… Рассмотрим простой пример. Если на нашем рисунке размером 400х300 мы хотим определить область в форме равнобедренного треугольника, основание которого проходит ровно посередине рисунка, занимая всю его ширину, а вершина нахо дится посередине верхней границы рисунка, то это можно сделать так:

Как видите, шесть координат определяют три точки – три угла нашего треугольника. В данном случае их последовательность не очень важна (можно было написать, например, "400.150.0.150.200.0"), но когда коли чество углов больше, становится важным порядок соединения точек. Например, записи:

…и:

…дадут разные результаты. В первом с случае это прямоугольник с вырезанным треугольником снизу, а во втором случае вырезанный треугольник находится справа.

Отпугивающим моментом в этой технологии является то, что приходится каким-то образом выяснять координаты каждой нужной точки. На реальном рисунке это невозможно сделать “на глаз”, и приходится, к примеру, выяснять все координаты в каком-либо графическом редакторе, а уже потом переносить их в HTML-документ. К счастью, в послед них версиях некоторых HTML-редакторов (например, Allaire Homesite) имеются встроенные средства для установки координат на картах графических ссылок.

Однако атрибуты SHAPE= и COORDS= – это еще не все. В теге <AREA> необходимо установить еще самое главное – атрибут HREF=, определяющий гиперссылку, то есть куда же должен попасть пользователь при щелчке мышью на этой “активной области”. Здесь никаких сложностей нет – атрибут HREF= тега <AREA> ведет себя так же, как если бы он был в обычном теге <А>.

Кроме того, бывает полезно определить также атрибут ALT=. Его значе ние может содержать поясняющий текст, который будет “всплывать” при наведении мыши на “активную область”.