ИНФОРМАЦИЯ,    ДИЗАЙН,    ПЕРЕВОДЫ,    РЕКЛАМА   .   .   .
w a p - с а й т
Информационный портал
Сегодня:  
admin@aranea.ru
+79068922256

  aranea.ru || Спецификация HTML 4.01 | 13. Элементы Object, Image и Applet

13. Элементы Object, Image и Applet

13.6. Карты изображений (Image map)

13.6.1. Клиентская карта изображений (Client-side image map): элементы MAP и AREA
   Примеры клиентских карт изображений
13.6.2. Серверные карты изображений (Server-side image map)

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

Карта изображения создается соединением объекта с детализацией чувствительных геометрических районов в объекте.

Существует два типа карт изображений:

  • Клиентская (Client-side). Когда пользователь активирует район клиентской карты изображений мышкой, координаты в пикселях интерпретируются устройством вывода. Устройство вывода выбирает связь, которая определена для активированного района, и следует ей.
  • Серверная (Server-side). Когда пользователь активирует район серверной карты изображения мышкой, то координаты в пикселях щелчка посылаются к серверному агенту, определенному в атрибуте href элемента A. Серверный агент интерпретирует координаты и выполняет некоторое действие.

Клиентские карты изображений предпочтительнее, чем серверные из-за двух причин, по крайней мере: они доступны людям, просматривающим их с помощью неграфических устройств вывода, и они предлагают непосредственную обратную связь (находится или нет указатель над активным регионом).

13.6.1 Клиентская карта изображений (Client-side image map): элементы MAP и AREA

<!ELEMENT MAP - - ((%block;) | AREA)+ -- client-side image map -->
<!ATTLIST MAP
  %attrs;                              -- %coreattrs, %i18n, %events --
  name        CDATA          #REQUIRED -- for reference by usemap --
  >

Начальный тег: обязательный, конечный тег: обязательный

<!ELEMENT AREA - O EMPTY               -- client-side image map area -->
<!ATTLIST AREA
  %attrs;                              -- %coreattrs, %i18n, %events --
  shape       %Shape;        rect      -- controls interpretation of coords --
  coords      %Coords;       #IMPLIED  -- comma-separated list of lengths --
  href        %URI;          #IMPLIED  -- URI for linked resource --
  nohref      (nohref)       #IMPLIED  -- this region has no action --
  alt         %Text;         #REQUIRED -- short description --
  tabindex    NUMBER         #IMPLIED  -- position in tabbing order --
  accesskey   %Character;    #IMPLIED  -- accessibility key character --
  onfocus     %Script;       #IMPLIED  -- the element got the focus --
  onblur      %Script;       #IMPLIED  -- the element lost the focus --
  >

Начальный тег: обязательный, конечный тег: запрещенный

Определение атрибутов для MAP

name = cdata [CI]
Этот атрибут присваивает имя карте изображения, определенной элементом MAP.

Определение атрибутов для AREA

shape = default|rect|circle|poly [CI]
Этот атрибут определяет форму района. Возможные значения:
  • default: Весь район.
  • rect: Определяет прямоугольный район.
  • circle: Определяет круглый район.
  • poly: Определяет многоугольный район.
coords = coordinates [CN]
Этот атрибут определяет положение и форму на экране. Количество и порядок значений зависит от определенной формы. Возможные комбинации:
  • rect: левый-x, верхний-y, правый-x, нижний-y.
  • circle: центральный-x, центральный-y, радиус. Обратите внимание. Когда значение радиуса является процентным значением, устройствам вывода следует рассчитывать окончательное значение радиуса на основе связанной ширины и высоты объекта. Радиус должен быть меньше обеих величин.
  • poly: x1, y1, x2, y2, ..., xN, yN. Первые x и y координатные пары и последние должны быть одними и теми же, чтобы закрыть многоугольник. Когда эти координатные значения не одинаковы, то устройство вывода должны заключить дополнительные координатные пары для закрытия многоугольника.
Координаты берутся относительно верхнего левого угла объекта. Все значения – длины. Все значения разделены запятыми.
nohref [CI]
Когда установлен этот булевый атрибут, то он определяет, какой район не имеет связанной ссылки.

Атрибут для связывания карты изображения с элементом

usemap = uri [CT]
Этот атрибут связывает карту изображения с элементом. Карта изображения определяется элементом MAP. Значение usemap должно согласовываться со значением атрибута name связанного элемента MAP.

Атрибуты, определенные в другом месте

  • id, class
  • lang, dir
  • title
  • style
  • name
  • alt
  • href, target
  • tabindex
  • accesskey
  • shape
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup, onfocus, onblur

Элемент MAP определяет клиентскую карту изображения (client-side image map) (или другие механизмы навигации), которая может связываться с другими элементами (IMG, OBJECT или INPUT). Карта изображения связана с элементом через атрибут usemap элемента. Элемент MAP может использоваться без связанного изображения для общих механизмов навигации.

Присутствие атрибута usemap для OBJECT подразумевает, что включаемый объект является изображением. Более того, когда элемент OBJECT имеет связанную клиентскую карту изображения, то устройства вывода могут выполнить взаимодействие пользователя с OBJECT единственным образом - в терминах клиентской карты изображения. Это позволяет устройствам вывода (таким как аудио браузер или робот) взаимодействовать с OBJECT без необходимости обрабатывать его; устройство вывода может даже не выбирать извлечение (или обработку) объекта. Когда OBJECT имеет связанную карту изображения, авторам не следует ожидать, что объект будет извлекаться или обрабатываться каждым устройством вывода.

Модель содержания элемента MAP позволяет авторам комбинировать следующее:

  1. Один или больше элементов AREA. Эти элементы не имеют содержания, но определяют геометрические районы карты изображения и ссылку, связанную с каждым районом. Обратите внимание, что устройства вывода обычно не показывают элементы AREA. Поэтому, авторы должны предоставлять альтернативный текст для каждого элемента AREA с помощью атрибута alt (смотрите ниже информацию о том, как определять альтернативный текст).
  2. Блочное содержание. Это содержание должно включать элементы A, которые определяют геометрические районы карты изображения и ссылку, связанную с каждым районом. Обратите внимание на то, что устройство вывода должно представлять блочное содержание элемента MAP. Авторам следует использовать этот метод для создания более доступных документов.

Когда элемент MAP содержит смешенное содержание (оба, элементы AREA и блочное содержание), то устройства вывода должны игнорировать элементы AREA.

Авторам следует определять геометрию карты изображения полностью с элементами AREA, или полностью с элементами A, или полностью с обоими элементами, если содержание смешанное. Авторы могут захотеть смешать содержание так, что старые устройства вывода будут манипулировать геометрией карты, определенной элементами AREA, а новые устройства будут иметь преимущество более богатого блочного содержания.

Если два или больше определенных района перекрываются, то элемент, определяющий район, который появляется раньше всех в документе, имеет преимущество (т.е. отвечает на ввод пользователя).

Устройствам вывода и авторам следует предлагать текстуальные альтернативы для графических карт изображений для случаев, когда графика не доступна, или пользователь не может получить доступ к ним. Например, устройства вывода могут использовать текст в alt для создания текстуальных ссылок на месте графической карты изображения. Такие ссылки могут активизироваться различными способами (клавиатура, голосовая активация и т.д.).

Обратите внимание. MAP не имеет обратной совместимости с устройствами вывода HTML 2.0.

Примеры клиентских карт изображений

В следующем примере мы создаем клиентскую карту изображения для элемента 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>

     ...the rest of the page here...

     <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>This is a navigation bar.
   </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">

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

Вложенные элементы OBJECT полезны для предоставления нейтрализации в случае, когда устройство вывода не поддерживает определенный формат. Например:

<P>
<OBJECT data="navbar.png" type="image/png">
  <OBJECT data="navbar.gif" type="image/gif">
    text describing the image...
  </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 объявляет, что геометрический район не имеет связанной ссылки.

13.6.2 Серверные карты изображений (Server-side image map)

Серверные карты изображений (Server-side image maps) могут быть интересны в случае, когда карта изображения является слишком сложной для клиентской карты изображения.

Можно определить серверную карту изображения только для элементов IMG и INPUT. В случае IMG, элемент IMG должен быть внутри элемента A, и необходимо установить булевый атрибут ismap ([CI]). В случае INPUT, элементы INPUT должны быть типа "image".

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

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

<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" на сервер, где ссылка активируется.


← Назад | Вперед →
Copyright © 2006 -  aranea.ru