Урок 9
Тема: изображения-карты (image maps).
Изображения-карты
позволяют выделить отдельные области изображений и определить для каждой из них
свое действие. Скажем, какие-то части картинки будут служить ссылками на другие
страницы, после клика по другим областям рисунка будет загружен и проигран
музыкальный фрагмент, или выполнен JavaScript. Ниже будет рассмотрен пример.
Существует
два типа изображений-карт:
- клиентские (client-side) - когда пользователь кликает
по рисунку, браузер сам интерпретирует координаты клика. Он выбирает
ссылку, определенную для данной области, и переходит по ней (либо
выполняет заданное действие);
- серверные (server-side) - координаты клика передаются
для интерпретации на сервер и уже он делает соответствующие действия
(например, возвращает браузеру URL для перехода).
Первый тип
проще и доступнее, поэтому далее рассматривать будем только его.
Для создания
изображения-карты используются элементы <MAP> и <AREA>.
Элемент MAP
(так и переводится - "карта") должен обязательно иметь аттрибут NAME.
Это позволяет указать браузеру, к какому именно рисунку на странице относится
данная карта.
Элемент 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") определяет, в каком окне будет открыт документ
(подробнее в Уроке про фреймы).
Если
описываемые области пересекаются (накладываются друг на друга), то приоритет
имеет область, описанная первой.
Аттрибут USEMAP
используется для того, чтобы соотнести какое-то изображение с определенной
картой. Он может использоваться с элементами IMG (чаще всего!), OBJECT и INPUT.
Теперь
обещанный пример:
Контуры
ссылок точно повторяют контуры рисунков. В данном примере при клике на ссылку
будет лишь появляться сообщение "Нажата ссылка...", чтобы зря не
гонять вас по страницам и не отнимать драгоценное время! Рассмотрим пример
подробнее:
<IMG SRC="../picts/maps.gif" BORDER="0" HEIGHT="145" WIDTH="360" ALT="Пример изображения-карты" USEMAP="#primer"><MAP NAME="primer"><AREA SHAPE="poly" COORDS="11,9,200,9,200,26,61,26,61,36"TITLE="Ссылка 1" HREF="javascript:alert('Нажата ссылка 1');">
<AREA SHAPE="poly" COORDS="11,55,11,134,60,134"TITLE="Ссылка 2" HREF="javascript:alert('Нажата ссылка 2');">
<AREA SHAPE="rect" COORDS="80,64,200,94"TITLE="Ссылка 3" HREF="javascript:alert('Нажата ссылка 3');">
<AREA SHAPE="rect" COORDS="80,104,200,134"TITLE="Ссылка 4" HREF="javascript:alert('Нажата ссылка 4');">
<AREA SHAPE="circle" COORDS="285,72,43"TITLE="Здесь нет ссылки" NOHREF>
<AREA SHAPE="circle"" COORDS="285,72,64"TITLE="Ссылка кольцевая" HREF="javascript:alert('Нажата ссылка в виде кольца');">
</MAP>
У элемента
IMG указан аттрибут USEMAP со значением "#primer". И далее следует
карта (MAP) с именем "primer". Дело в том, что таких рисунков на
странице может быть несколько, и соответственно несколько карт к ним. Более
того, одна карта может подходить к нескольким рисункам (например, внизу и вверху
страницы у вас размещены рисунки с навигацией по сайту). Чтобы браузер знал,
какому рисунку какая карта соответствует, необходимо указывать имена.
Как сделано
кольцо? Здесь две области в виде круга накладываются друг на друга. Первая
область без ссылки (NOHREF) была описана первой, а уже потом вторая в виде
круга большего диаметра. Ранее мы упоминали, что при наложении двух и более
областей приоритет имеет область, описанная в тексте первой. Вот потому-то
центральная часть круга и не имеет ссылки!
Об
использовании аттрибута SHAPE со значением "default". Если в данном
примере после всех ссылок добавить, например, такую строку:
<AREA SHAPE="default" HREF="javascript:alert('Вы нажали на
фон');">
то весь оставшийся рисунок (в данном случае фон) станет ссылкой.