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

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

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

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

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

Для определения областей картинки, чувствительных к нажатию мыши, их следует описать в специальном таге , имеющем вид
…

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

Внутри тагакаждая чувствительная область изображения описывается в таге . Его общий вид следующий:

Закрывать тагне нужно.

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

Список координат зависит от выбранной формы и включает в себя координаты в пикселах, перечисленные через запятую. Как обычно, сначала указывается X-, а затем Y-координата и при этом считается, что ось Y расположена сверху вниз от верхнего левого угла рисунка. Левый верхний угол имеет координаты (0,0). Для прямоугольника указываются координаты левого верхнего и правого нижнего углов, например . Для круга указываются X- и Y-координаты центра и радиус в пикселах, например, . Для многоугольника перечисляются пары X- и Y-координат вершин. Для надежности многоугольник должен быть замкнутым, то есть, первая пара вершин совпадает с последней.

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

Для связывания изображения с созданной картой достаточно в таге , с помощью которого вставлено изображение, указать опцию вида usemap=#имя карты, например, . Здесь использована карта с именем a1, находящаяся в текущем документе.

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

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

Статьи к прочтению:

Imagine Dragons — Thunder

Похожие статьи: