Графическая карта ссылок или изображение карта

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

клиентские (client-side) - когда пользователь кликает по рисунку, браузер сам интерпретирует координаты клика. Он выбирает ссылку, определенную для данной области, и переходит по ней (либо выполняет заданное действие);

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

Первый тип проще и доступнее, поэтому далее рассматривать будем только его. Для создания изображения-карты используются элементы <MAP> и <AREA>.

Элемент MAP (так и переводится - "карта") должен обязательно иметь атрибут NAME. Это позволяет указать браузеру, к какому именно рисунку на странице относится данная карта. Элемент AREA имеет следующие атрибуты:

1. SHAPE - описывает форму выделяемой области, возможные значения: a) RECT - прямоугольник;

b) CIRCLE - круг;

c) POLY - многоугольник;

d) DEFAULT - определяет всю область.

2. COORDS - координаты, определяющие размеры и положение области на изображении. Количество и порядок значений зависит от значения атрибута SHAPE:

a) RECT: - левый-X, верхний-Y, правый-X, нижний-Y (т.е. сначала координаты левого верхнего угла, затем правого нижнего);

b) CIRCLE: - центр-X, центр-Y, радиус (т.е. горизонтальная и вертикальная координаты центра круга и радиус);

c) POLY: - X1, Y1, X2, Y2,..., Xn, Yn (просто перечисляются координаты всех вершин

многоугольника).

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

4. ALT - альтернативный текст для выделенной области, используется невизуальными браузерами. 5. TITLE - название выделенной области, выводится в виде подсказки, всплывающей при

наведении курсора на область рисунка.

6. TARGET - значение этого атрибута ("_top", "_blank", "_self" или "_parent") определяет, в каком окне будет открыт документ (в случае если окно разбито на фреймы).

Если описываемые области пересекаются (накладываются друг на друга), то приоритет имеет область, описанная первой.

Атрибут USEMAP используется для того, чтобы соотнести какое-то изображение с определенной картой. Он может использоваться с элементами IMG (чаще всего!), OBJECT и INPUT.