belarusweb.net
© Петр Романовский Минск, 2016-2017.



belarusweb.net

Основы создания сайтов...
HTML >>>

4.3. Понятие карты-изображения. Теги <map> и <area>

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

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

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

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

<!DOCTYPE html>
<html>
<head>
	<!-- Привыкаем задавать служебные элементы -->
	<meta charset="utf-8">	
	<base href="http://belarusweb.net/belarusweb_files/">
	<link rel="stylesheet" href="css/style_1.css">
	<script src="js/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>

Пример 4.3. Формирование серверной карты-изображения

Рис. 4.4. Отображение страницы с использованием серверной карты-изображения браузером

Если мы кликнем, например, по прямоугольнику, на сервер будут переданы координаты x и y клика. Программа проверит в какой диапазон попадают данные координаты и после проверки вернет нам веб-страницу с описанием свойств прямоугольника.

Клиентские карты-изображения, наоборот, располагаются полностью на компьютере пользователя и строятся с использованием элементов 'map' и 'area'. Элемент 'map' формируется парным тегом <map>. Он связывается с картой-изображением через свой атрибут name. Значение данного атрибута должно совпадать со значением атрибута usemap (знак решетки при этом нужно опускать) соответствующего элемента 'img', выступающего в роли клиентской карты-изображения. Кроме того, элемент 'map' является контейнером для хранения элементов 'area', каждый из которых определяет активную область карты-изображения и превращает их в гиперссылки. Формируется элемент 'area' при помощи одиночного тега <area>, т.е. является пустым элементом (см. пример 4.5).

<!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>

Пример 4.5. Формирование клиентской карты-изображения

Поскольку элемент 'area' служит для создания гиперссылок, то он обладает всеми атрибутами элемента 'a': href, target, download, rel, hreflang, type (смотреть). Кроме того, он связан с изображением и служит для определения его активных зон, поэтому обладает еще и дополнительными атрибутами: alt, shape и coords (от англ. coordinates).

Атрибут alt задает альтернативный текст для данной активной зоны изображения.

Атрибут shape определяет форму данной активной зоны изображения, а coords задает для нее координаты в пикселях, которые отсчитываются от верхнего левого угла изображения, где считается, что x=0px и y=0px. В качестве значений shape принимает:

Внешне результат отображения страниц, содержащих одно и то же изображение, но используемое в одном случае, как серверная карта-изображение, а в другом, как клиентская карта, будет одинаков. Результат использования также будет выглядеть для пользователя практически одинаково. Тогда возникает вопрос, зачем применять два вида карт? Все очень просто и зависит от ситуации. Если изображение небольшое, например, графическое меню, то конечно же используется клиентская карта-изображение, поскольку изображение быстро загружается на компьютер пользователя, и отсутствует необходимость каждый раз при нажатии на активную зону посылать запрос на сервер, тем самым дополнительно загружая его и заставляя ждать ответа. Однако, если карта очень большая, например, представляет спутниковый снимок города, и при выборе объектов на этом снимке должна загружаться отдельная страница с описанием и фото данного объекта, то загружать ее на компьютер пользователя становится проблематично, т.к. размеры таких карт могут исчисляться мегабайтами одних только координат.

В конце добавим, что карта может быть поделена на активные зоны произвольным образом, но могут оставаться и непокрытые места. При клике по таким неактивным областям ничего происходить не будет.

Еще один пример карты-изображения можно посмотреть на соответствующей странице нашего учебного сайта №1.

Контрольные вопросы и задания

  1. Дайте определение карты-изображения. На какие виды они делятся?
  2. Как создать серверную карту-изображение?
  3. Как создать клиентскую карту-изображение?
  4. Опишите атрибуты shape и coords.

Словарь новых английских слов

interchange [ˈɪntətʃeɪndʒ] – обмен, чередование.
format [ˈfɔːmat] – формат.
image [ˈɪmɪdʒ] – изображение, изображать.
alternative [ɔːlˈtəːnətɪv] – альтернативный, другой.
portable [ˈpɔːtəb(ə)l] – портативный,
переносной, ручной.
network [ˈnɛtwəːk] – сеть.
graphics [ˈɡrafɪks] – графика, проектирование.
height [hʌɪt] – высота, рост.
width [wɪtθ] – ширина, полоса.
use [ˈjuːs] – использование, применение,
использовать, употреблять.
map [mæp] – карта, план.
area [ˈeəriə] – область, зона, участок.
shape [ʃeɪp] – форма, очертание.
coordinates [ˌkəʊˈɔːdɪneɪts] – координаты.
polygon [ˈpɒlɪɡ(ə)n] – многоугольник.
rectangle [ˈrɛktaŋɡ(ə)l] – прямоугольник.
canvas [ˈkanvəs] – холст, полотно.

Комментарии (0)
Петр Романовский
1. Приветствуются комментарии, которые содержат дополнения к материалу текущей страницы, а также ваши ответы на вопросы других пользователей.
2. Если вам что-то непонятно - спрашивайте, не забывая написать, что именно и с какого места.
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!    
     
belarusweb.net © Петр Романовский, Минск, 2016-2017.
Связаться с автором
Наверх