HTML-Учебник.Навигационные карты.
Навигационные карты.
Карты, обрабатываемые на клиентской машине браузером, создаются с помощью элементов MAP и AREA и представляют собой гиперссылки, офомленные в виде активных областей на изображении. Применить созданную карту к изображению можно вызвав ее по имени с помощью атрибута USEMAP элемента IMG .
Пример:
<!-- Создаем карту с именем ImageMap: -->
<MAP NAME="ImageMap">
<AREA href="something.html" SHAPE="rect" COORDS="0,0,70,140" ALT="Левая половинка">
<AREA href="anything.html" SHAPE="rect" COORDS="71,0,140,140" ALT="Правая половинка">
</MAP>
<!-- Создали. -->
<BODY>
<!-- Создали. -->
<IMG src="/img/block.gif" USEMAP="#ImageMap" HEIGHT="140" WIDTH="140"BORDER="0">
...
В данном примере мы создали квадратное изображение размером 140x140 пикселов, левая часть которого является ссылкой на файл something.html, а правая - на файл anything.html.
Примечание:
Для создания карт, обрабатываемых на сервере, используется атрибут ISMAP элемента IMG . Мы их сознательно не рассматриваем, ибо механизм обработки карт на удаленной машине осуществляется с помощью скриптов и не имеет к HTML никакого отношения.
MAP
(HTML 3.2) - Map
Создает новую навигационную карту. Между начальным и конечным тегами содержит один или несколько элементов AREA , определяющих навигационные области карты.
Атрибуты:
NAME - единственный и обязательный атрибут. Определяет имя навигационной карты, уникальное для данного документа. Используется для вызова карты с помощью атрибута USEMAP элемента IMG . Вы можете указать любое имя без пробелов с использованием латинских символов и цифр.
Пример:
<!-- Создаем карту Map1 : -->
<MAP NAME="Map1">
<AREA href="...>
<AREA href="...>
...
</MAP>
<!-- Карта готова. Применим её к картинке:. -->
<IMG SRC="image.gif" USEMAP="#Map1" WIDTH=200 HEIGHT=100 ALT="Картинка">
AREA
(HTML 3.2) - Map Area
Создает область карты, определенной с помощью элемента MAP . Элемент должен располагаться между начальным и конечным тегами элемента MAP . Не имеет конечного тега.
Атрибуты:
SHAPE - определяет форму навигационной области. Возможные значения:
-
rect - прямоугольник;
-
circle - окружность;
-
poly - многоугольник.В зависимости от выбранной формы меняется способ задания ее координат в атрибуте COORDS .
COORDS - определяет координаты навигационной области на карте. Используется в паре с атрибутом SHAPE . Способы задания координат для разных типов областей:
-
SHAPE="rect" COORDS="левый x, верхний y, правый x, нижний y" ;
-
SHAPE="circle" COORDS="центр x, центр y, радиус" ;
-
SHAPE="poly" COORDS="x1,y1,x2,y2,x3,y3,..." ;
HREF - определяет область как гипертекстовую ссылку. Значение задается в виде ссылки (URL).
TARGET - определяет окно (фрейм), на которое указывает гипертекстовая ссылка. Этот атрибут используется только совместно с атрибутом HREF.В качестве значения необходимо задать либо имя одного из существующих фреймов (см. элемент FRAME ) либо одно из зарезевированных имен, подробно описанных в атрибуте TARGET элемента A .
NOHREF - определяет область как неактивную (невосприимчивую к нажатию). Данный атрибут противоположен атрибуту HREF и используется для отмены действия последнего.
ALT - определяет альтернативный текст-подсказку для данной области.
Пример:
<!-- Создаем хитрую карту с круглой дыркой посередине -->
<MAP NAME="map1">
<AREA NOHREF SHAPE="circle" COORDS="80,70,40">
<AREA href="guide.html" ALT="Путеводитель" SHAPE="rect" COORDS="0,0,167,140">
</MAP>
...
<!-- Применяем ее к картинке -->
<IMG src="/img/logo.gif" WIDTH="167" HEIGHT="140" BORDER="0"ALT="Путеводитель" USEMAP="#map1">
Примечания:
В последовательности из нескольких элементов AREA наибольший приоритет имеют те, которые были определены первыми. Они перекрывают области, определенные позже. Именно поэтому в приведенном выше примере сначала создается пассивная область (отверстие) и лишь потом - активная со ссылкой.
Старайтесь всегда указывать атрибут ALT . Пользователи, работающие в текстовом режиме (а таких немало!), скажут вам спасибо.