Web Builder II

Что такое изображения-карта? Это - рисунок, разные части которого имеют различные ссылки или же выполняют различные скрипты. Чтобы вам было понятнее, я приготовил вам следущую карту. Проексперементируйте, кликая по разным частям рисунка. Да, ище, если вы используете Интернет Експлорер, кликните по верхней панели "Разрешить доступ", иначе ничего не увидите.

Вот код етой карты:
<IMG SRC="im/imap.jpg" BORDER="0" WIDTH="307" HEIGHT="230" ALT="Здесь изображения-карта" align=center USEMAP="#Mmap"> <MAP NAME="Mmap"> <AREA SHAPE="poly" COORDS="0,145,152,104,306,135,306,156,0,205" OnClick="alert('Здесь скалы!!!'); return false" LANGUAGE="Javascript" TITLE="Скалы"> <AREA SHAPE="poly" COORDS="0,0,307,0,306,135,152,104,0,215" OnClick="alert('Небо!!!'); return false" LANGUAGE="Javascript" TITLE="Небо"> <AREA SHAPE="poly" COORDS="0,205,306,156,307,230,0,230" OnClick="alert('Море!!!'); return false" LANGUAGE="Javascript" TITLE="Море">

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

Вслед за ерим идет описания активных областей карты. Начинаем с открывающегося тега <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") определяет, в каком окне будет открыт документ

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

Участие в каталогах