Методические указания. Активные изображения (image maps), или изображения, чувствительные к щелчкам мыши, позволяют создать в HTML-документе графические меню произвольной формы

Активные изображения (image maps), или изображения, чувствительные к щелчкам мыши, позволяют создать в HTML-документе графические меню произвольной формы. Активное изображение – это изображение с так называемыми активными областями (hot spots), которые ссылаются на URL других web-страниц.

Есть два метода формирования активных изображений: на сервере и у клиента. Изображения первого типа используют сервер для того, чтобы найти соответствующий данной активной области URL и передать на браузер нужную страницу. Активные изображения, работающие на клиентской машине, задают информацию об активной области на HTML-странице, так что браузер сам выясняет, какие области являются активными, и запрашивает с сервера соответствующую страницу.

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

Процесс создания активного изображения состоит из двух этапов. Сначала необходимо определить на картинке области, которые нужно сделать активными, а потом соотнести их со ссылками на другие URL. Активные области задаются перечислением их координат (в пикселях). Все это можно сделать вручную, определив координаты углов активных областей, но можно, например, воспользоваться программой MapEdit.

Тег <MAP>…</MAP> создает новую навигационную карту. Между начальным и конечным тэгами содержит один или несколько элементов <AREA>, определяющих навигационные области карты. Параметр тега <MAP>:

- NAME – единственный и обязательный параметр. Определяет имя навигационной карты, уникальное для данного документа. Используется для вызова карты с помощью параметра USEMAP тега <IMG>. Можно указать любое имя без пробелов с использованием латинских символов и цифр.

Тег <AREA> создает область карты, определенной с помощью тега <MAP>. Элемент должен располагаться между начальным и конечным тэгами элемента <MAP>. Не имеет конечного тэга.

Параметры тега <AREA>:

- SHAPE – определяет форму навигационной области. В зависимости от выбранной формы меняется способ задания ее координат в параметре COORDS. Возможные значения:

- rect – прямоугольник;

- circle – окружность;

- poly – многоугольник.

- COORDS – определяет координаты навигационной области на карте. Способы задания координат для разных типов областей:

- SHAPE="rect" COORDS="левый x, верхний y, правый x, нижний y";

- SHAPE="circle" COORDS="центр x, центр y, радиус";

- SHAPE="poly" COORDS="x1,y1,x2,y2,x3,y3,...".

- HREF – определяет область как гипертекстовую ссылку. Значение задается в виде ссылки (URL).

- TARGET – определяет окно (фрейм), на которое указывает гипертекстовая ссылка. Этот параметр используется только совместно с параметром HREF. В качестве значения необходимо задать либо имя одного из существующих фреймов, либо одно из зарезервированных имен любого окна.

- NOHREF – определяет область как неактивную (невосприимчивую к нажатию). Данный параметр противоположен параметру HREF и используется для отмены действия последнего.

- ALT – определяет альтернативный текст-подсказку для данной области.

Параметры тега <IMG>, необходимые для создания активного изображения:

- USEMAP – применяет к изображению навигационную карту (image map), заданную элементом MAP. В качестве значения задается имя карты с предшествующей ему решеткой. Например, если имя карты – "map1", то ссылка на нее будет выглядеть как "#map1". Обратите внимание: прописные и строчные буквы в данном параметре трактуются браузером как разные.

- ISMAP – определяет изображение как навигационную карту (image map), обрабатываемую сервером. Имеет смысл использовать только тогда, когда изображение является гиперссылкой. После клика мышкой на изображении серверу отправляются x,y-координаты нажатия. В зависимости от полученных координат, сервер (при наличии на нем соответствующего программного обеспечения) может показать вам тот или иной документ. Данный параметр является флагом и не требует присвоения значения.

Определить карту можно следующим образом:

- вставить рисунок, который выбран как активное изображение, в HTML документ, используя тег изображения с атрибутом USEMAP и поместить его после тега </MAP>; необходимо перед именем карты в атрибуте USEMAP записать символ “#” следующим образом:

<IMG SRC=“mymap.gif” USEMAP=“#sitemap”>

- следует выбрать тип активной области (квадрат, треугольник или круг) и обозначить границы каждой области;

- границы активных областей задаются координатами углов прямоугольника и многоугольника (треугольника) или центра и радиуса круга (данные координаты можно посмотреть в любой программе просмотра изображений, например ACDSee);

- затем каждой выбранной и описанной области приписывается URL документа, на который он будет ссылаться.

Пример активных изображений:

<MAP NAME=“imap”>

<AREA SHAPE=“rect” COORDS=“0,0,100,100” HREF=“1.html”>

<AREA SHAPE=“rect” COORDS=“100,0,200,100” HREF=“2.html”>

<AREA SHAPE=“default” nohref>

</MAP>

<IMG SRC=“mymap.gif” USEMAP=“#sitemap”>

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

Активные изображения у клиента работают независимо от программного обеспечения сервера и не перестанут функционировать, даже если файлы будут перенесены на другой сервер.

Контрольные вопросы

1. Что такое активное изображение?

2. Как создается активное изображение?

3. Теги определения активного изображения.

4. Чем отличается активная область от неактивной (невосприимчивой к нажатью мышью)?