Элемент <МАР>
В четвертом уроке я уже упоминал о том, что язык разметки гипертекста позволяет создавать графические элементы, выполняющие роль карт, определенные участки которых могут реагировать на нажатие кнопок мыши и отправлять пользователя к соответствующим документам или файловым объектам сайта потому же принципу, что и гиперссылки. Рассмотрим правила создания графических карт при помощи команды <МАР>.
Элементы <МАР> динамически связаны с изображениями, вызываемыми директивой <IMG>, и в общем виде описываются следующим образом:
<МАР МАМЕ="имя карты">
<AREA HREF="URL" SНАРЕ="параметр" COORDS="x1. y1. x2. y2"
АLТ="альтернативный текст">
</МАР>
Атрибут NAME тега <МАР> определяет уникальное имя карты, записываемое латинскими символами. Следует учитывать, что при задании имени карты важно соблюдение регистра, поскольку интерпретатор броузера различает в данной команде строчное и заглавное написание. Тег <AREA> определяет непосредственно активную область изображения. Атрибут HREF, как и при использовании его совместно с тегом <А>, указывает на адрес документа, вызываемого при нажатии кнопки мыши над данным участком изображения. Атрибут ALT определяет альтернативный текст, который выводится на экран в специальномвсплывающем прямоугольнике в случае, если пользователь подержит курсор мыши над активным участком карты несколько секунд. Атрибут SHAPE управляет формой активной области и может принимать одно из трех значений: RECT — прямоугольник, CIRCLE — круг или POLY — многоугольник. И наконец, атрибут COORDS позволяет определить относительные координаты вершин активной области. Возможные значения данного атрибута приведены в табл. 6.1.
Таблица 6.1. Значения атрибута COORDS
Значение 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:
<IMG SRC="URL" WIDTH="ширина" HEIGHT-''высота" BORDER="0" USЕМАР="#имя_карты">
Обратите внимание на то, что имя карты, заданное атрибутом NAME тега <МАР>,предваряется в атрибуте USEMAP тега <IMG> символом «#». Все остальные атрибуты данной директивы записываются так,же, как обычно.
Наглядным примером реализации простой графической карты может служить следующий отрывок html-кода:
<IMG SRC="/images/bar.gif" BORDER=0 USEMAP="#ny_map">
<MAP NAME="my_map">
<AREA HREF="help.html" АLT="Полный список разделов сайта" SHAPE=RECT
COORDS="0. 0. 118. 28">
<AREA HREF="about.html" ALT="0 нашей компании" SHAPE=RECT COORDS="184.
0. 276. 28">
<AREA HREF="address.html" АLТ="06ратная связь" SHAPE=RECT COORDS="118.
0, 184. 28">
<AREA HREF="guestbook.htmT' ALT="Haшa гостевая книга" SHAPE=RECT
COORDS="276, 0. 373. 28">
</MAP>
Что же, теперь можно смело сказать, что вы владеете основным запасом команд HTML, необходимым для создания собственного web-проекта средней степени сложности. Описание и правила применения других тегов языка разметки гипертекста приведены в приложении 2, которым вы можете воспользоваться по мере необходимости.
| На главную |