Оглавление:
Раздел 1. Введение: теги, HTML документ.
Раздел 2. Выделение текста - физические и логические стили.
Раздел 3. Форматирование текста.
Раздел 4. Ссылки.
Раздел 5. Рисунки.
Раздел 6. Цвет фона и текста. Шрифты.
Раздел 7. Таблицы.
Раздел 8. Списки.
Раздел 9. Последовательности, комментарии.
Раздел 10. Изображения-карты (image maps).
Раздел 11. Звук на сайте.
Раздел 12. Каскадные таблицы стилей.
Раздел 13. Фреймы.

Раздел 10
Тема: изображения-карты (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('Вы нажали на фон');">
то весь оставшийся рисунок (в данном случае фон) станет ссылкой.

следующий раздел