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

Для определения изображения как карты используется атрибут USEMAP тэга <IMG>:

<img src="Stars.gif" border=0 usemap="#map-1">

В данном примере тег дает указание браузеру вывести на веб-странице файл "Stars.gif". Атрибут USEMAP сообщает браузеру, что это изображение является изображением-картой.

Само описание областей, которые будут являться ссылками на различные страницы определяется тегами <MAP> и <AREA>. Данные теги имеют следующие атрибуты:

• NAME="..." - определяет имя навигационной карты, уникальное для данного документа. Вы можете указать любое имя без пробелов с использованием латинских символов и цифр.
• HREF="..." - адрес документа, на который ссыдается данная ссылка.
• NOHREF - означает, что эта область изображения не действует как ссылка. Используется, когда Вы хотите вырезать дыру в "горячей" зоне.
• ALT="..." - текстовое описание области.
• SHAPE - определяет форму области, COORDS - координаты облаcти на карте. В зависимости от формы области принимают следующие значения:
  • SHAPE=RECT прямоугольник, для которого
    COORDS="x1, y1, x2, y2", x и y задают координаты верхнего левого и нижнего правого углов
  • SHAPE=CIRCLE круг, для которого
    COORDS="x0, y0, r", x и y - координаты центра окружности, r - радиус окружности.
  • SHAPE=POLY многоугольник, для которого
    COORDS="x1, y1, x2, y2, x3, y3, ...", x и y - координаты вершин

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

Ниже приведен пример карты-изображения, разбитой на четыре участка, один из которых будет являтся неактивным, заданным атрибутом NOHREF:

<MAP name="map-1">
<AREA shape="rect" coords="0,0,144,65" href="h1.html" 
         alt="левая верхняя область" target="_blank">
<AREA shape="rect" coords="145,0,288,65" nohref 
         alt="правая верхняя неактивная область" target="_blank">
<AREA shape="rect" coords="0,65,144,131" href="h1" 
         alt="левая нижняя область" target="_blank">
<AREA shape="rect" coords="145,65,288,131" href="h1" 
         alt="правая нижняя область" target="_blank">
</MAP>
<IMG src="Stars.gif" border=0 usemap="#map-1">