Тема: Картированные изображения

Сегодня многие Web-страницы располагают интересной разновидностью меню - картированными изображениями, то есть, картинками, отдельные части которых чувствительны к нажатию кнопки "мыши". Обычно чувствительные части изображения связаны с HTML-документами, то есть, являются ссылками.

В качестве графического формата для изображения-карты, как правило, выбирается формат GIF с чересстрочной загрузкой, который поддерживается практически всеми браузерами и позволяет выводить изображение, постепенно уточняя детали. Следует позаботиться о том, чтобы размер файла-изображения не был слишком большим - как и всегда при работе с графикой.

Использование изображения-карты вместо обычных гиперссылок предпочтительнее, если этого требует графический дизайн страницы. Однако, не следует забывать о пользователях, браузер которых не поддеживает вывод графики или этот вывод отключен - если на странице, помимо картированного изображения не предусмотрено других средств навигации, они не смогут воспользоваться Вашей страницей. Поэтому наряду с картированным изображением Web-мастер обычно разрабатывает обычный текстовый вариант меню.

Изображение-карта может обслуживаться как сервером, так и на стороне клиента. Мы рассмотрим только последний вариант, так как для его реализации не нужно иных средств, кроме тагов HTML.

Для определения областей картинки, чувствительных к нажатию "мыши", их следует описать в специальном таге <MAP>, имеющем вид
<MAP NAME="имя_карты">...</MAP>

Располагать таг <MAP> можно в любом месте документа, но для удобства это обычно делают в начале документа после тага <BODY>.

Внутри тага <MAP> каждая чувствительная область изображения описывается в таге <AREA>. Его общий вид следующий:
<area shape="форма" coords="список координат" href="URL">
Закрывать таг <AREA> не нужно.

Форма может принимать одно из значений rect (прямоугольник), poly (многоугольник), circle (круг). Если эта опция не указана, подразумевается значение rect. При наложении двух зон действует значение, определенное первым тагом <AREA>.

Список координат зависит от выбранной формы и включает в себя координаты в пикселах, перечисленные через запятую. Как обычно, сначала указывается X-, а затем Y-координата и при этом считается, что ось Y расположена сверху вниз от верхнего левого угла рисунка. Левый верхний угол имеет координаты (0,0). Для прямоугольника указываются координаты левого верхнего и правого нижнего углов, например <area shape="rect" coords="0,0,200,100">. Для круга указываются X- и Y-координаты центра и радиус в пикселах, например, <area shape="circle" coords="263,200,50" href="1.html">. Для многоугольника перечисляются пары X- и Y-координат вершин. Для надежности многоугольник должен быть замкнутым, то есть, первая пара вершин совпадает с последней.

В опции href="URL" как обычно указывается URL-адрес документа, адресуемого данной областью. Если чувствительная область определена, но не связывается ни с одним документом, вместо данной опции указывается значение nohref.

Для связывания изображения с созданной картой достаточно в таге <img>, с помощью которого вставлено изображение, указать опцию вида usemap="#имя карты", например, <img src="1.jpg" width="526" height="400" border="1" usemap="#a1">. Здесь использована карта с именем a1, находящаяся в текущем документе.

Задание по теме "Картированное изображение"

Создайте в графическом редакторе изображение, включающее в себя несколько геометрических фигур (круг, прямоугольник, многоугольник) и используйте его для картирования Вашего сайта.