Карты - это способ
сделать различные части одного графического изображения гиперссылками.
Они позволяют выделить отдельные области изображений и определить
для каждой из них свое действие.
В данном примере изображения-карты Вы можете безбоязненно
щелкать по ссылкам, они никуда не ведут, а выводят сообщения
о том, какие ссылки были нажаты. Кнопки на этом изображении
я нарисовал только для того, чтобы можно было видеть ссылки,
а не искать их наугад по всему рисунку.
Здесь приводится
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">
</MAP>
|
Как видите, чтобы
создать карту нужно вставить в тег <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") определяет, в каком окне будет
открыт документ |
Для того, чтобы
рассчитать точно координаты нужной части изображения существуют
специальные программы. Одна из них называется MapEdit. |
