Карты ссылок.

Карты ссылок, или как их еще называют карты-изображения (Image-map) позволяют описывать "горячие" области произвольных форм внутри изображения. Для создания карты ссылок необходимо иметь изображение, в котором визуально выделенны ссылки (опорное изображение), и описание "горячих" областей. Опорное изображение должно содержать атрибут  usemap="#map-name", где map-name - имя карты.

<img src="images/menu.gif" alt="Menu" usemap="#mainMenu" ... />

Затем, необходимо создать элемент <map>, описывающий саму карту. Элемент <map> должен содержать обязательный атрибут  name="map-name", задающий имя карты. Внутри элемента <map> должны располагаться описания "горячих" областей:

<map name="mainMenu">
 <!-- описание "горячих" областей -->
</map>

Можно определить области трех типов:

• circle - круглая область; требуется указать координаты центра и радиуса (3 цифры).
• rect - прямоугольная область; требуется указать координаты верхнего левого и правого нижнего углов (4 цифры).
• poly - многоугольная область произвольной формы; требуется указать координаты каждой вершины, обходя их по контуру области в любом направлении (n*2 цифр, n - количество вершин).

Области описываются внутри элемента <map> с помощью элементов <area />. Этот элемент поддерживает следующие атрибуты:

•  shape="circle | rect | poly" - задает форму (тип) области.
•  coords="..." - координаты области в зависимости от ее типа. Координаты перечисляются через запятую.
•  href="адрес ссылки" - задает адрес ресурса, на который ссылается область.
•  nohref="nohref" - запрещает ссылку из данной области. Данный атрибут используется для вычитания части области при комбинации нескольких областей (рассматривается ниже на примере).
•  target="имя окна" - используется для указания целевого окна браузера, в которое будет загружен указанный ресурс (как в гиперссылках)
•  alt="Тестовое описание" - текстовое описание области. Задает всплывающую подсказку для области.

Рассмотрим несколько примеров.

Круглая область (circle)

Ниже представлен пример и код создания области ссылки в виде окружности радиуса 29px с центром в координатах 50px по x и y (наведите курсор на кнопку):

<img src="images/imap_01_circle.gif" usemap="#testmap1" border="0" />
<map name="testmap1">
 <area shape="circle" coords="50,50,29" href="javascript:void(0)"
  alt="Область в виде окружности" />
</map>

В качестве координат для области типа circle сначала указывают x и y координаты центра, а затем и радиус окружности в пикселах, разделяя их запятыми. На странного вида адрес ресурса не обращайте особого внимания. Он, фактически, означает, что гиперссылка никуда не указывает. В собственных проектах вы будете указывать реальные адреса страниц или других ресурсов сети.

Прямоугольная область (rect)

Прямоугольная область требует указания координат верхнего левого (x1, y1) и правого нижнего (x2, y2) углов. Все цифры в значении атрибута  coords перечисляются через ",". Ниже представлен пример создания области ссылки прямоугольной формы:

<img src="images/imap_02_rect.gif" usemap="#testmap2" border="0" />
<map name="testmap2">
 <area shape="rect" coords="15,25,84,74" href="javascript:void(0)"
  alt="Область в виде прямоугольника" />
</map>

Многоугольная область (poly)

Многоугольная, или еще полигональная, область является наиболее сложной из всех перечисленных. Однако, хотя и создание полигональной области требует значительно больших усилий, чем любой другой, результат того стоит. С помощью областей типа poly можно задать ссылку совершенно произвольной формы с той или иной степенью аппроксимации (приближения). Все будет зависеть только от вашей настойчивости и желания добиться наилучшего результата.

Для создания областей типа poly необходимо перечислить координаты всех вершин многоугольника, в порядке обхода их по часовой или против часовой стрелки. Ниже продемонстрирован пример создания и работы области произвольной формы (в виде стрелки, к примеру):

<img src="images/imap_03_poly.gif" usemap="#testmap3" border="0" />
<map name="testmap3">
 <area shape="rect" coords="6,35,52,35,52,19,93,50,52,81,52,65,6,65" href="javascript:void(0)"
  alt="Область в виде стрелки (многоугольник)" />
</map>

Комбинация областей

В некоторых случаях форма описываемой области ссылки может быть получена комбинацией несколькох областей более простой формы. Такое решение может быть более "элегантным", чем создание одной сложной полигональной области. Рассмотрим следующий пример:

<img src="images/imap_04_add.gif" usemap="#testmap4" border="0" />
<map name="testmap4">
 <area shape="circle" coords="42,41,28" href="javascript:void(0)"
  alt="Комбинация 2х окружностей" />
 <area shape="circle" coords="65,72,15" href="javascript:void(0)"
  alt="Комбинация 2х окружностей" />
</map>

Две формы, которые вы хотите "сложить", просто должны бубут ссылаться на один и тот же ресурс. В результате, куда бы вы не кликнули, браузер перейдет по указанному адресу, создавая впечатление использования одной сложной области.

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

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

<img src="images/imap_05_sub.gif" usemap="#testmap5" border="0" />
<map name="testmap5">
 <area shape="circle" coords="50,50,15" nohref="nohref"
  alt="Вычитаемая окружность" />
 <area shape="circle" coords="50,50,28" href="javascript:void(0)"
  alt="Результат вычитания" />
</map>

Подведем итоги

Подводя итоги, давайте рассмотрим все достоинства и недостатки карт изображений. Так как карты-изображения используются с той же целью, что и таблицы в прошлом занятии, то уместно было бы провести сравнение обоих методик построения графического интерфейса страницы. Результат этого сравнения представлен ниже в виде таблицы:

Карты-изображения	Таблицы
Можно создавать ссылки произвольной формы.	Можно создавать ссылки только прямоугольной формы.
Более простой код для меню сложной структуры.	При усложнении структуры меню в значительной степени возрастает сложность кода таблицы.
Отсутствие навигации при отключенных изображениях или в текстовых браузерах (пользователь просто не увидит ссылок).	Сохранение функциональности навигационной структуры даже при выключенных изображениях или в текстовых браузерах (благодаря альтернативному тексту ссылок меню).
Отсутствие возможности индивидуальной оптимизации фрагментов изображения	Возможность для каждого изображения - фрагмента графического интерфейса страницы выбрать индивидуальный формат и параметры сохранения, наиболее подходящие для данного фрагмента.
Отсутствие возможности создания "ролловера" (см. ниже)	Возможность создавать "ролловеры" для гиперссылок меню (см. ниже).

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