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