Навигационные карты

Карты-изображения позволяют привязывать ссылки к разным областям одного изображения - это способ сделать различные части одного графического изображения гиперссылками. Они позволяют выделить отдельные области изображений и определить для каждой из них свое действие.

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

Он является ссылкой на описание конфигурации карты, которая задается тегом MAP. Значение параметра name данного тега должно соответствовать имени в usemap. Для задания активой области, являющейся ссылкой на HTML-документ, используется тег AREA.

Простой пример с использованием рисунков можно посмотреть здесь

Как видите, чтобы создать карту нужно вставить в тэг <IMG> атрибут USEMAP="#name", где name - имя карты (значок # обязателен). В примере использовалось название imageMap.

Далее описываем активные области карты. Начинаем с открывающегося тэга <MAP NAME="name"> (здесь повторяется имя, но уже без значка #), а заканчиваем закрывающимся тэгом </MAP>.

Между этими тэгами помещаем описание каждой активной области изображения: <AREA SHAPE="форма" COORDS="координаты" HREF="URL" ALT=" текст">.
Элемент <AREA> имеет следующие аттрибуты и их значения:

COORDS

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

SHAPE

Описывает форму выделяемой области, возможные значения:

RECT:(прямоугольник) - левый верхний -(горизонтальный)X,(вертикальный)Y; правый нижний-(горизонтальный)X,(вертикальный)Y (т.е. сначала координаты, горизонтальный и вертикальный левого верхнего угла, затем горизонтальный и вертикальный правого нижнего угла)
CIRCLE:(круг) - центр-(горизонтальный)X,(вертикальный)Y; радиус (т.е. горизонтальная и вертикальная координаты центра круга и радиус)
POLY:(многоугольник) - (горизонтальный)X1,(вертикальный) Y1; X2, Y2; ...; Xn, Yn (просто перечисляются горизонтальные и вертикальные координаты всех вершин многоугольника).
DEFAULT - определяет всю область, т.е весь рисунок может стать ссылкой.

NOHREF

Определяет, что данной области не соответствует никакая ссылка. Где это может пригодиться? Ну, например, если вы хотите сделать ссылку не в виде круга, а в виде кольца

ALT

Альтернативный текст для выделенной области, используется невизуальными браузерами.

TITLE

Название выделенной области, выводится в виде подсказки, всплывающей при наведении курсора на область рисунка.

TARGET

Значение этого аттрибута ("_top", "_blank", "_self" или "_parent") определяет, в каком окне будет открыт документ

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

Хорошие примеры навигации с помощью изображений-карт Вы можете посмотреть здесь.