Опубликован: 19.05.2006 | Доступ: свободный | Студентов: 10006 / 1556 | Оценка: 4.29 / 4.03 | Длительность: 22:29:00
ISBN: 978-5-94774-648-8
Лекция 13:

Объекты, Изображения и Аплеты

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

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

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

<HTML>
   <HEAD>
      <TITLE>The cool site!</TITLE>
   </HEAD>
   <BODY>
     <P><OBJECT data="navbar1.gif" type="image/gif" usemap="#map1">
     <MAP name="map1">
       <P>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:

<HTML>
   <HEAD>
      <TITLE>The cool site!</TITLE>
   </HEAD>
   <BODY>
     <P><OBJECT data="navbar1.gif" type="image/gif" usemap="#map1">
     </OBJECT>

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

     <MAP name="map1">
       <P>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:

<P><OBJECT data="navbar1.gif" type="image/gif" usemap="#map1">
   <P>Это панель навигации.
   </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 ):

<P><IMG src="navbar1.gif" usemap="#map1" alt="navigation bar">

Следующий пример иллюстрирует, как карты изображений могут использоваться совместно (shared).

Вложенные элементы OBJECT используются, если ПА не поддерживают определённые форматы. Например:

<P>
<OBJECT data="navbar.png" type="image/png">
  <OBJECT data="navbar.gif" type="image/gif">
    ...текст, описывающий изображение...
  </OBJECT>
</OBJECT>

Если ПА не поддерживает формат PNG, он пытается отобразить рисунок GIF. Если GIF не поддерживается (напр., в голосовых ПА ), отображается текстовое описание, предоставленное как содержимое внутреннего элемента OBJECT. Если элементы OBJECT вложены таким образом, авторы могут разделять изображение между ними:

<P>
<OBJECT data="navbar.png" type="image/png" usemap="#map1">
  <OBJECT data="navbar.gif" type="image/gif" usemap="#map1">
     <MAP name="map1">
     <P>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">
<P>
<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 объявляет, что данный геометрический регион не имеет ассоциированной гиперссылки.

Серверные (на стороне сервера) карты изображений

Серверные карты могут представлять интерес в тех случаях, когда карта слишком сложна, чтобы работать как карта на стороне клиента.

Можно определить серверные карты только для элементов IMG и INPUT.

IMG должен находиться внутри элемента A, а булев атрибут ismap ([CI]) должен быть установлен.

INPUT должен быть типа "image".

Когда пользователь активирует ссылку щелчком на изображении, координаты экрана передаются непосредственно тому серверу, где находится документ. Значения координат экрана выражены в пикселах относительно изображения. Нормативную информацию об определении пикселов и о том, как их обсчитывать, см. в "[CSS1]" .

В следующем примере активный регион определяет ссылку к серверу. Таким образом, щелчок где-либо на изображении вызывает отправку координат щелчка на сервер:

<P><A href="http://www.acme.com/cgi-bin/competition">
        <IMG src="game.gif" ismap alt="target"></A>

Точка щелчка передаётся на сервер так: ПА устанавливает новый URI из URI, определённого атрибутом href в элементе A, присоединением ' ?' с последующими координатами x и y, разделёнными запятыми. Теперь переход осуществляется по новому URI. Например, в предыдущем отрывке, если пользователь щёлкнул в точке x=10, y=27, тогда новый URI будет "http://www.acme.com/cgi-bin/competition?10,27".

ПА, не предоставляющие пользователю возможность выбора определённых координат (неграфические ПА, которые имеют только клавиатурный ввод, речевые ПА и т.д.), должны при активации гиперссылки отсылать серверу координаты "0,0".

Ирина Кириллова
Ирина Кириллова

Нажимаю на ссылку на дополнительный материал и дополнение к информации-меня возвращает на первую страницу лекции. Подскажите, что делать? Или дополнительный материал платный?