на главную
Язык разметки гипертекста HTML

Изображение-карта

Иногда согласно дизайнерскому замыслу web-мастера в HTML-документ надо поместить изображение, отдельные части которого должны переводить по гиперссылке на разные целевые документы. Один из очевидных примеров такого изображения - географическая карта, щелкнув мышкой по определенным зонам которой, мы переходим к соответствующим документам. В этом случае организовать ссылку с использованием элемента a непосредственно нельзя, и приходится либо "разрезать" изображение на несколько отдельных, состыковать их и действовать обычным образом (см. раздел Гиперссылки), либо использовать элемент map, задающий навигационную карту, основанную на изображении.

У элемента-контейнера map единственным обязательным артибутом является его имя name, которое должно быть использовано при описании атрибута usemap элемента img , описывающего изображение, призванного служить картой (см. пример, приведенный ниже). Внутри контейнера map каждой чувствительной к перемещению мыши зоне изображения должен соответствовать элемент area с атрибутами:

coords = список Список через запятую координат активной зоны (зависит от типа заданной формы зоны)
href = url Адрес целевого документа гиперссылки, связанного с указанной зоной
shape = форма Возможные значения:
 circle (окружность - задается координатами центра и радиусом в пикселах)
 rectangle (прямоугольник - задается координатами левого верхнего и правого нижнего угла)
 polygon (многоугольник - задается координатами своих вершин)
noref Иногда бывает нужно указать, что данная зона (заданная атрибутом SHAPE и координатами COORDS) не является активной, реакции на щелчок мыши нет
alt Альтернативный текст; "всплывает" при наведении курсора мыши на данную зону изображения
id, style, class, title, onClick, onDblClick, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, dir, lang необязательные атрибуты, описаны в разделе "Концепции HTML 4+".


Пусть, например, у нас есть изображение  russia.gif  размера 360х196 пиксел и три HTML-документа, на которые надо организовать гиперссылки : peterburg.htm, moscow.htm и yakutsk.htm .

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

Санкт-Петербург Москва Якутск
 

Центры кружков, если принять за точку отсчета (0,0) левый верхний угол изображения, находятся примерно на уровне
(48,84) - Москва
(49,60) - Санкт-Петербург
(256,93) - Якутск.

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

<img src="russia.gif" width="360" height="196" border=0 usemap="#Russia">

<map name="Russia">
  <area shape="circle" coords="49,60,9" href="peterburg.htm"
        alt="Санкт-Петербург" title="Санкт-Петербург">
  <area shape="circle" coords="48,84,9" href="moscow.htm"
        alt="Москва" title="Москва">
  <area shape="circle"  coords="256,93,9" href="yakutsk.htm"
        alt="Якутск" title="Якутск">
</map> 
      
Изучив HTML-код, проверьте, как работает карта-изображение в нашем примере. Чтобы было удобнее, целевые документы выводятся в новых маленьких окнах.