HTML :: Карты-изображения

Определение карты-изображения

Изображения на веб-странице можно использовать в качестве гиперссылок, для этого нужно поместить тег <img> между открывающим и закрывающим тегами гиперссылки. В результате при клике по любой области данного изображения пользователь перейдет по адресу, указанному в атрибуте href элемента «a». Однако иногда возникает потребность в том, чтобы различные области (части) одного и того же изображения являлись отдельными гиперссылками, ведущими в совершенно разные места. В этом случае приходится использовать карту-изображение, которое как раз и позволяет хранить в себе сразу несколько гиперссылок.

Карта-изображение (от англ. image map) – это изображение, содержащее специальные активные зоны, являющиеся гиперссылками.

Атрибуты ismap и usemap

Карты-изображения применяются в двух вариантах: серверном и клиентском, которые задаются, соответственно, атрибутами ismap и usemap элемента «img». Первый атрибут является логическим и не принимает значений, являясь индикатором, а второй – в качестве значения принимает имя специального элемента «map», перед которым ставится знак решетки. Рассмотрим эти два вида графических карт подробнее.

Серверные карты-изображения

Серверные карты-изображения строятся следующим образом: создается элемент «a», атрибут href которого указывает адрес программы-обработчика, расположенной на сервере, затем внутри гиперссылки «a» располагается элемент «img», у которого указывается атрибут ismap. При нажатии по какой-либо активной зоне такого изображения, на сервер будут переданы координаты x и y щелчка мыши, которые отсчитываются от верхнего левого угла изображения. Координаты отправляются на сервер методом GET, т.е. передаются вместе с адресом серверной программы-обработчика, указанного в атрибуте href гиперссылки, непосредственно в самом адресе и перечисляются через запятую после знака вопроса. На сервере программа-обработчик принимает координаты и решает, какой документ необходимо отправить в ответ. Рассмотрим конкретный код, показанный в примере №1. Отображение соответствующей страницы в браузере показано на рис. №2.

HTML

htmlCodes

<!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>
	Это изображение &ndash; серверная карта. <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).

HTML

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<!-- Привыкаем задавать служебные элементы -->
	<meta charset="utf-8">	
	<base href="http://localhost/test/">
	<title>Клиентская карта-изображение</title>
</head>
<body>
	Это изображение &ndash; клиентская графическая карта. <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 :: Карты-изображения

Определение карты-изображения

Атрибуты ismap и usemap

Серверные карты-изображения

Клиентские карты-изображения, теги <map> и <area>

Быстрый переход к другим страницам