HTML :: Карты-изображения
Определение карты-изображения
Изображения на веб-странице можно использовать в качестве гиперссылок, для этого нужно поместить тег <img> между открывающим и закрывающим тегами гиперссылки. В результате при клике по любой области данного изображения пользователь перейдет по адресу, указанному в атрибуте href элемента «a». Однако иногда возникает потребность в том, чтобы различные области (части) одного и того же изображения являлись отдельными гиперссылками, ведущими в совершенно разные места. В этом случае приходится использовать карту-изображение, которое как раз и позволяет хранить в себе сразу несколько гиперссылок.
Карта-изображение (от англ. image map) – это изображение, содержащее специальные активные зоны, являющиеся гиперссылками.
Атрибуты ismap и usemap
Карты-изображения применяются в двух вариантах: серверном и клиентском, которые задаются, соответственно, атрибутами ismap и usemap элемента «img». Первый атрибут является логическим и не принимает значений, являясь индикатором, а второй – в качестве значения принимает имя специального элемента «map», перед которым ставится знак решетки. Рассмотрим эти два вида графических карт подробнее.
Серверные карты-изображения
Серверные карты-изображения строятся следующим образом: создается элемент «a», атрибут href которого указывает адрес программы-обработчика, расположенной на сервере, затем внутри гиперссылки «a» располагается элемент «img», у которого указывается атрибут ismap. При нажатии по какой-либо активной зоне такого изображения, на сервер будут переданы координаты x и y щелчка мыши, которые отсчитываются от верхнего левого угла изображения. Координаты отправляются на сервер методом GET, т.е. передаются вместе с адресом серверной программы-обработчика, указанного в атрибуте href гиперссылки, непосредственно в самом адресе и перечисляются через запятую после знака вопроса. На сервере программа-обработчик принимает координаты и решает, какой документ необходимо отправить в ответ. Рассмотрим конкретный код, показанный в примере №1. Отображение соответствующей страницы в браузере показано на рис. №2.
<!DOCTYPE html> <html> <head> <!-- Привыкаем задавать служебные элементы --> <meta charset="utf-8"> <base href="https://site.name/html_files/"> <link rel="stylesheet" href="css/style_1.css"> <script src="javascript/code_1.js"></script> <title>Серверная карта-изображение</title> </head> <body> Это изображение – серверная карта. <br> <!-- Создаем серверную карту --> <a href="php/test.php"> <img src="images/html_images/example_4_3a.png" alt="map_2" ismap> </a> <p> Кликните по нужной фигуре, чтобы перейти <br> на страницу ее описания. </p> </body> </html>
Пример №1. Формирование серверной карты-изображения
Рис. №2. Отображение страницы с использованием серверной карты-изображения браузером
Если мы кликнем, например, по прямоугольнику, на сервер будут переданы координаты x и y клика. Программа проверит в какой диапазон попадают данные координаты и после проверки вернет нам веб-страницу с описанием свойств прямоугольника.
Клиентские карты-изображения, теги <map> и <area>
Клиентские карты-изображения, наоборот, располагаются полностью на компьютере пользователя и строятся с использованием элементов «map» и «area». Элемент «map» формируется парным тегом <map> (от англ. map – карта). Он связывается с картой-изображением через свой атрибут name. Значение данного атрибута должно совпадать со значением атрибута usemap (знак решетки при этом нужно опускать) соответствующего элемента «img», выступающего в роли клиентской карты-изображения. Кроме того, элемент «map» является контейнером для хранения элементов «area», каждый из которых определяет активную область карты-изображения и превращает их в гиперссылки. Формируется элемент «area» при помощи одиночного тега <area> (от англ. area – область, регион), т.е. является пустым элементом (см. пример №3).
<!DOCTYPE html> <html> <head> <!-- Привыкаем задавать служебные элементы --> <meta charset="utf-8"> <base href="http://localhost/test/"> <title>Клиентская карта-изображение</title> </head> <body> Это изображение – клиентская графическая карта. <br> <!-- Привязываем к изображению карту map_3 (не забываем про знак решетки) --> <img src="images/html_images/example_4_5a.png" alt="map_3" usemap="#map_3"> <map name="map_3"> <!-- Указываем активные области карты --> <area href="page_1.html" shape="circle" coords="70,75,50"> <!-- Эта ссылка откроется в новом окне --> <area href="page_2.html" target="_blank" shape="poly" coords="130,125, 150,125, 140,25, 130,125"> <area href="page_3.html" shape="rect" coords="170,125, 240,25"> </map> <p> Кликните по нужной фигуре, чтобы перейти <br> на страницу ее описания. </p> </body> </html>
Пример №3. Формирование клиентской карты-изображения
Поскольку элемент «area» служит для создания гиперссылок, то он обладает всеми атрибутами элемента «a»: href, target, download, rel, hreflang, type (смотреть). Кроме того, он связан с изображением и служит для определения его активных зон, поэтому обладает еще и дополнительными атрибутами: alt, shape и coords (от англ. coordinates).
Атрибут alt задает альтернативный текст для данной активной зоны изображения.
Атрибут shape определяет форму данной активной зоны изображения, а coords задает для нее координаты в пикселях, которые отсчитываются от верхнего левого угла изображения, где считается, что x=0px и y=0px. В качестве значений shape принимает:
- "circle" – область в виде окружности; через запятую указываются координаты x и y центра окружности, а также ее радиус, например, coords="150, 200, 120";
- "default" – вся область изображения;
- "poly" (от англ. polygon) – область в виде произвольного многоугольника; через запятую указываются координаты x, y его вершин, начиная с любой и заканчивая обход в стартовой точке, например, coords="50,70, 64,82, 85,82, 130,60, 50,70";
- "rect" (от англ. rectangle) – область в виде прямоугольника; через запятую указываются координаты x, y левого верхнего и правого нижнего углов, например, coords="50,70, 154,213".
Внешне результат отображения страниц, содержащих одно и то же изображение, но используемое в одном случае, как серверная карта-изображение, а в другом, как клиентская карта, будет одинаков. Результат использования также будет выглядеть для пользователя практически одинаково. Тогда возникает вопрос, зачем применять два вида карт? Все очень просто и зависит от ситуации. Если изображение небольшое, например, графическое меню, то конечно же используется клиентская карта-изображение, поскольку изображение быстро загружается на компьютер пользователя, и отсутствует необходимость каждый раз при нажатии на активную зону посылать запрос на сервер, тем самым дополнительно загружая его и заставляя ждать ответа. Однако, если карта очень большая, например, представляет спутниковый снимок города, и при выборе объектов на этом снимке должна загружаться отдельная страница с описанием и фото данного объекта, то загружать ее на компьютер пользователя становится проблематично, т.к. размеры таких карт могут исчисляться мегабайтами одних только координат.
В конце добавим, что карта может быть поделена на активные зоны произвольным образом, но могут оставаться и непокрытые места. При клике по таким неактивным областям ничего происходить не будет.
Еще один пример карты-изображения можно посмотреть на соответствующей странице нашего учебного сайта №1.
Быстрый переход к другим страницам
- Вставка изображений в документ
- Карты-изображения в HTML
- Тег <canvas>
- Вернуться к оглавлению учебника