Элемент <МАР>

В четвертом уроке я уже упоминал о том, что язык разметки гипертекста позволяет создавать графические элементы, выполняющие роль карт, определенные участки которых могут реагировать на нажатие кнопок мыши и отправлять пользователя к соответствующим документам или файловым объектам сайта потому же принципу, что и гиперссылки. Рассмотрим правила создания графических карт при помощи команды <МАР>.

Элементы <МАР> динамически связаны с изображениями, вызываемыми директивой <IMG>, и в общем виде описываются следующим образом:

Атрибут NAME тега <МАР> определяет уникальное имя карты, записываемое латинскими символами. Следует учитывать, что при задании имени карты важно соблюдение регистра, поскольку интерпретатор броузера различает в данной команде строчное и заглавное написание. Тег <AREA> определяет непосредственно активную область изображения. Атрибут HREF, как и при использовании его совместно с тегом <А>, указывает на адрес документа, вызываемого при нажатии кнопки мыши над данным участком изображения. Атрибут ALT определяет альтернативный текст, который выводится на экран в специальномвсплывающем прямоугольнике в случае, если пользователь подержит курсор мыши над активным участком карты несколько секунд. Атрибут SHAPE управляет формой активной области и может принимать одно из трех значений: RECT — прямоугольник, CIRCLE — круг или POLY — многоугольник. И наконец, атрибут COORDS позволяет определить относительные координаты вершин активной области. Возможные значения данного атрибута приведены в табл. 6.1.

Значение SHAPE

Форма активной области

Синтаксис записи COORDS

Значения параметров COORDS

SHAPE=RECT

SHAPE=CIRCLE

SHAPE=POLY

Прямоугольник

Круг

Многоугольник

COORDS="xl,yl,х2,у2"

COORDS="X,Y,R"

COORDS="x1, y1, x2, y2, x3, y3, ... xN, yN"

x1 и y1 задают координаты левого верхнего угла фигуры, х2и у2 — правого нижнего

X и Y — координаты центра окружности, R — ее радиус в пикселах

x1, y1 ... xN, yN -координаты вершин многоугольника

Значения координат активной области отсчитываются в пикселах по длине и ширине картинки от левого верхнего угла изображения, принимаемого за точку с координатами 0,0. Иными словами, значение х возрастает справа налево,

а значение у — сверху вниз. Координаты х и у могут быть также заданы в процентах от реального размера изображения, например: SHAPE="RECT" COORDS="0.0.50Я.50Ж". Необходимо помнить, что если несколько активных областей одного изображения перекрывают друг друга, область, описанная тегом <AREA>первой, имеет приоритет.

При составлении графической карты можно использовать также необязательный атрибут NOHREF, определяющий неактивные участки карты. На практике он используется довольно редко и, как правило, для того, чтобы вырезать в активном участке изображения неактивную «дыру».

Вот несколько простых примеров создания активных областей:

SHAPE=RECT COORDS="0, 0, 20, 20" — создает прямоугольник размером 20x20 пикселов в левом верхнем углу изображения;

SHAPE=CIRCLE COORDS="30, 30, 10" создает круг с центром, расположенном в точке (30, 30) и радиусом 10 пикселов;

SHAPE=POLY COORDS="10, 60, 15, 30, 30, 60" создает треугольник с координатами вершин (10, 60), (15, 30) и (30, 60).

Теперь, когда графическая карта описана вами при помощи тега <МАР>, можно интегрировать ее в web-страницу, подготовив соответствующее изображение влюбом графическом редакторе и вызвав его уже знакомой вам командой <IMG> с атрибутом USEMAP:

Обратите внимание на то, что имя карты, заданное атрибутом NAME тега <МАР>,предваряется в атрибуте USEMAP тега <IMG> символом «#». Все остальные атрибуты данной директивы записываются так,же, как обычно.

Наглядным примером реализации простой графической карты может служить следующий отрывок html-кода:

<AREA HREF="help.html" АLT="Полный список разделов сайта" SHAPE=RECT

<AREA HREF="about.html" ALT="0 нашей компании" SHAPE=RECT COORDS="184.

<AREA HREF="address.html" АLТ="06ратная связь" SHAPE=RECT COORDS="118.

Что же, теперь можно смело сказать, что вы владеете основным запасом команд HTML, необходимым для создания собственного web-проекта средней степени сложности. Описание и правила применения других тегов языка разметки гипертекста приведены в приложении 2, которым вы можете воспользоваться по мере необходимости.