Здесь приводится HTML код данного примера. В нем исключены ссылки на script, который использовался в примере для вывода сообщений.
| <IMG SRC=" Map_example.jpg " BORDER=" 0 " WIDTH=" 200 " HEIGHT=" 160 " ALT=" Пример изображения-карты " USEMAP="# Map_example "> <MAP NAME=" Map_example "> <AREA SHAPE=" rect " COORDS=" 11,11,70,24 " TITLE=" Ссылка 1 " HREF=" URL "> <AREA SHAPE=" rect " COORDS=" 70,72,128,83 " TITLE=" Ссылка 2 " HREF=" URL "> <AREA SHAPE=" rect " COORDS=" 190,136,128,149 " TITLE=" Ссылка 3 " HREF=" URL "> |
Как видите, чтобы создать карту нужно вставить в тег <IMG SRC=""> атрибут USEMAP="# name " , где name - имя карты (значок # обязателен). В примере использовалось название Map_example . Я пропускаю остальные атрибуты в этом теге, Вы их должны знать, т.к. о них уже рассказывалось в предыдущей статье
Далее описываем активные области карты. Начинаем с открывающегося тега <MAP NAME=" name "> (здесь повторяется имя, но уже без значка # ), а заканчиваем закрывающимся тегом </MAP> .
Между этими тегами помещаем описание каждой активной области изображения: <AREA SHAPE=" форма " COORDS=" координаты " HREF=" адрес " TITLE=" альтернативный текст "> . Элемент <AREA> имеет следующие аттрибуты и их значения:
| SHAPE | Описывает форму выделяемой области, возможные значения: RECT - прямоугольник CIRCLE - круг POLY - многоугольник DEFAULT - определяет всю область, т.е весь рисунок может стать ссылкой. |
| COORDS | Координаты, определяющие размеры и положение области на изображении. Все координаты отсчитываются в пикселях от левого верхнего угла изображения. Количество и порядок значений зависит от значения аттрибута SHAPE: RECT: - левый-X, верхний-Y, правый-X, нижний-Y (т.е. сначала координаты левого верхнего угла, затем правого нижнего) CIRCLE: - центр-X, центр-Y, радиус (т.е. горизонтальная и вертикальная координаты центра круга и радиус) POLY: - X1, Y1, X2, Y2, ..., Xn, Yn (просто перечисляются координаты всех вершин многоугольника). |
| NOHREF | Определяет, что данной области не соответствует никакая ссылка. Где это может пригодиться? Ну, например, если вы хотите сделать ссылку не в виде круга, а в виде кольца |
| ALT | Альтернативный текст для выделенной области, используется невизуальными браузерами. |
| TITLE | Название выделенной области, выводится в виде подсказки, всплывающей при наведении курсора на область рисунка. |
| TARGET | Значение этого аттрибута ("_top", "_blank", "_self" или "_parent") определяет, в каком окне будет открыт документ |
Для того, чтобы рассчитать точно координаты нужной части изображения существуют специальные программы. Одна из них называется