Примеры клиентских карт

В следующем примере мы создаём клиентскую карту для элемента OBJECT.

Мы не хотим отображать содержимое карты при отображении элемента OBJECT, поэтому мы "прячем" элемент MAP внутри содержимого элемента OBJECT. Следовательно, содержимое элемента MAP будет отображаться, только если OBJECT не может быть отображён.

<HTML> <HEAD> <TITLE>The cool site!</TITLE> </HEAD> <BODY> <OBJECT data="navbar1.gif" type="image/gif" usemap="#map1"> <MAP name="map1"> Navigate the site: <A href="guide.html" shape="rect" coords="0,0,118,28">Access Guide</a> | <A href="shortcut.html" shape="rect" coords="118,0,184,28">Go</A> | <A href="search.html" shape="circle" coords="184,200,60">Search</A> | <A href="top10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">Top Ten</A> </MAP> </OBJECT> </BODY> </HTML>

Нам может понадобиться отображать содержимое карты даже тогда, когда ПА может отображать OBJECT. Например, нам нужно ассоциировать карту с элементом OBJECT и вставить текстовую навигационную панель внизу страницы. Для этого мы определяем элемент MAP вне OBJECT:

...остальная часть страницы...

<MAP name="map1"> Navigate the site: <A href="guide.html" shape="rect" coords="0,0,118,28">Access Guide</a> | <A href="shortcut.html" shape="rect" coords="118,0,184,28">Go</A> | <A href="search.html" shape="circle" coords="184,200,60">Search</A> | <A href="top10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">Top Ten</A> </MAP> </BODY> </HTML>

В это примере мы создаём похожую карту, используя на этот раз элемент AREA. Обратите внимание на использование текста alt:
<OBJECT data="navbar1.gif" type="image/gif" usemap="#map1"> Это панель навигации. </OBJECT>
<MAP name="map1"> <AREA href="guide.html" alt="Access Guide" shape="rect" coords="0,0,118,28"> <AREA href="search.html" alt="Search" shape="rect" coords="184,0,276,28"> <AREA href="shortcut.html" alt="Go" shape="circle" coords="184,200,60"> <AREA href="top10.html" alt="Top Ten" shape="poly" coords="276,0,276,28,100,200,50,50,276,0"> </MAP>
Сходная версия с использованием элемента IMG вместо OBJECT (с тем же объявлением MAP):
<IMG src="navbar1.gif" usemap="#map1" alt="navigation bar">
Следующий пример иллюстрирует, как карты изображений могут использоваться совместно (shared).
Вложенные элементы OBJECT используются, если ПА не поддерживают определённые форматы. Например:
 <OBJECT data="navbar.png" type="image/png"> <OBJECT data="navbar.gif" type="image/gif"> ...текст, описывающий изображение... </OBJECT> </OBJECT>
Если ПА не поддерживает формат PNG, он пытается отобразить рисунок GIF. Если GIF не поддерживается (напр., в голосовых ПА), отображается текстовое описание, предоставленное как содержимое внутреннего элемента OBJECT. Если элементы OBJECT вложены таким образом, авторы могут разделять изображение между ними:
 <OBJECT data="navbar.png" type="image/png" usemap="#map1"> <OBJECT data="navbar.gif" type="image/gif" usemap="#map1"> <MAP name="map1"> Navigate the site: <A href="guide.html" shape="rect" coords="0,0,118,28">Access Guide</a> | <A href="shortcut.html" shape="rect" coords="118,0,184,28">Go</A> | <A href="search.html" shape="circle" coords="184,200,60">Search</A> | <A href="top10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">Top Ten</A> </MAP> </OBJECT> </OBJECT>
Следующий пример показывает, как определить якоря для создания неактивных зон внутри карты изображений. Первый якорь определяет маленький круглый регион без ассоциированной гиперссылки. Второй якорь определяет более крупный круглый регион с тем же центром координат. При их соединении образовался круг с неактивной средней частью и активным краем. Важен порядок определения якорей, поскольку малый круг должен перекрывать большой.
<MAP name="map1"> <A shape="circle" coords="100,200,50">I'm inactive.</A> <A href="outer-ring-link.html" shape="circle" coords="100,200,250">I'm active.</A> </MAP>
Подобным же образом атрибут nohref элемента AREA объявляет, что данный геометрический регион не имеет ассоциированной гиперссылки.

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