Примеры клиентских навигационных карт

В следующем примере мы создаем клиентскую навигационную карту для элемента . Сы не хотим генерировать содержимое карты при генерации элемента , поэтому мы "скроем" элемент в содержимом элемента . Затем содержимое элемента будет генерироваться, только если нельзя сегенировать содержимое элемента .

<HTML> <HEAD> <TITLE>Крутая страница!</TITLE> </HEAD> <BODY> <OBJECT data="navbar1.gif" type="image/gif" usemap="#map1"> <MAP name="map1"> Перемещение по узлу: <A href="guide.html" shape="rect" coords="0,0,118,28">Руководство по доступу</a> | <A href="shortcut.html" shape="rect" coords="118,0,184,28">Переход</A> | <A href="search.html" shape="circle" coords="184,200,60">Поиск</A> | <A href="top10.html" shape="poly" coords="276,0,373,28,50,50,276,0">Первые десять</A>&lt </MAP> </OBJECT> </BODY> </HTML>

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

<HTML> <HEAD> <TITLE>Крутая страница!</TITLE> </HEAD> <BODY> <OBJECT data="navbar1.gif" type="image/gif" usemap="#map1"> </OBJECT>

...продолжение страницы...

<MAP name="map1"> Перемещение по узлу: <A href="guide.html" shape="rect" coords="0,0,118,28">Руководство по доступу</a> | <A href="shortcut.html" shape="rect" coords="118,0,184,28">Переход</A> | <A href="search.html" shape="circle" coords="184,200,60">Поиск</A> | <A href="top10.html" shape="poly" coords="276,0,373,28,50,50,276,0">Первые десять</A> </MAP> </BODY> </HTML>

В следующем примере мы создаем сходную навигационную карту, на этот раз используя элемент . Обратите внимание на использование текста :
<OBJECT data="navbar1.gif" type="image/gif" usemap="#map1"> Это навигационная панель. </OBJECT>
<MAP name="map1"> <AREA href="guide.html" alt="Руководство по доступу" shape="rect" coords="0,0,118,28"> <AREA href="search.html" alt="Поиск" shape="rect" coords="184,0,276,28"> <AREA href="shortcut.html" alt="Переход" shape="circle" coords="184,200,60"> <AREA href="top10.html" alt="Первые десять" shape="poly" coords="276,0,373,28,50,50,276,0"> </MAP>
Вот версия с использованием элемента вместо элемента (с тем же самым объявлением ):
<IMG src="navbar1.gif" usemap="#map1" alt="навигационная панель">
В следующем примере показано, как элементы могут совместно использовать навигационные карты.
Вложенные элементы полезны для обеспечения fallbacks в случае, если агент пользователя не поддерживает определенные форматы. Например:
 <OBJECT data="navbar.png" type="image/png"> <OBJECT data="navbar.gif" type="image/gif"> текст с описанием изображения...
</OBJECT> </OBJECT>
Если агент пользователя не поддерживает формат PNG, он пытается сгенерировать изображение в формате GIF. Если он не поддерживает GIF (например, это речевой агент пользователя), он воспроизводит текстовое описание, указанное в содержимсом внутреннего элемента . Если элементы вложены таким образом, авторы могут обеспечивать совместное использование этими элементами навигационных карт:
 <OBJECT data="navbar.png" type="image/png" usemap="#map1"> <OBJECT data="navbar.gif" type="image/gif" usemap="#map1"> <MAP name="map1"> Перемещение по узлу: <A href="guide.html" shape="rect" coords="0,0,118,28">Руководство по доступу</a> | <A href="shortcut.html" shape="rect" coords="118,0,184,28">Переход</A> | <A href="search.html" shape="circle" coords="184,200,60">Поиск</A> | <A href="top10.html" shape="poly" coords="276,0,373,28,50,50,276,0">Первые десять</A> </MAP> </OBJECT> </OBJECT>
В следующем примере показано, как можно указать anchors для создания неактивных зон в навигационной карте. Первый anchor определяет небольшую круглую область, с которой не связана ссылка. Второй anchor определяет круглую область большего размера с той же координатой центра. Обе они вместе образуют кольцо, центр которого неактивен, а внешняя часть активна. Порядок определения anchor важен, поскольку меньший круг должен иметь приоритет над большим.
<MAP name="map1"> <A shape="circle" coords="100,200,50">Я неактивная.</A> <A href="outer-ring-link.html" shape="circle" coords="100,200,250">Я активная.</A> </MAP>
Точно так же атрибут элемента объявляет, что с геометрической областью не связана ссылка.

Содержание раздела