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

Активное изображение — это изображение с так называемыми активными областями, которые ссылаются на URL других страниц или узлов.

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

Два метода формирования активных изображений: на сервере и у клиента.

Серверные карты

HTML-документ должен быть размещен на web-сервере.

Web- сервер должен поддерживать CGI-сценарии (Common Gateway Interface, Общий интерфейс шлюза), которые выполняют обработку запросов, поступающих от браузера при работе с картой-изображением.

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

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

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

Это выполняется заданием атрибута ISMAP в тэге <IMG>.

Кроме того, карту-изображение необходимо сделать ссылкой на Web-странице.

<А HREF=MyImage.map> <IMG SRC=MyImage.gif ISMAP> </A>

Ссылка в этом примере представляет собой не адрес другого HTML-документа, а файл конфигурации карты-изображения, который содержит координаты для каждой активной области изображения с именем Myimage.gif.

Клиентские карты

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

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

Допустимо сохранять конфигурацию карты в отдельном файле и давать на него ссылку.

Для указания того, что встроенное изображение является опорным для карты, используется атрибут USEMAP тега <IMG>. Значением атрибута USEMAP является ссылка на описание конфигурации карты. <IMG SRC=logo.gif USEMAP=#logo>

Для описания конфигурации областей карты-изображения используются теги <МАР> и <AREA>

Клиентские карты. Тег <MAP>

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

Такие области устанавливают невидимые зоны на изображении, являющиеся ссылками на HTML-документы.

Атрибуты:

• NAME - Имя карты-изображения, которое однозначно ее определяет. Значение атрибута name тега <MAP> должно соответствовать имени в usemap.

При этом аргумент атрибута usemap тега <IMG> начинается с символа решетки.

<img src="map.gif" usemap="#map" border="0">

<map name="map"> … </map>

Клиентские карты. Тег <AREA>

Каждый элемент <AREA> определяет активные области изображения, которые являются ссылками.

Тег <AREA> задает форму области, ее координаты, устанавливает адрес документа, на который следует сделать ссылку, а также имя окна или фрейма, куда браузер будет загружать документ.

Этот тег всегда располагается в контейнере <MAP>, который связывает координаты областей с изображением.

Атрибуты:

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

• HREF- Задает адрес документа, на который следует перейти.

• NOHREF- Область без ссылки на другой документ.

• TARGET- Имя окна или фрейма, куда браузер будет загружать документ.

• SHAPE- Форма области.

• COORDS- Координаты активной области.

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

• HREF - Задает адрес документа, на который следует перейти.

• NOHREF - Область без ссылки на другой документ.

• TARGET - Имя окна или фрейма, куда браузер будет загружать документ.

• SHAPE - Форма области. Возможные значения: rect | circle | poly |default

• COORDS - Координаты активной области.

  • rectкоординаты верхнего левого и правого нижнего углов прямоугольника

  • circleкоординаты центра круга и радиус

  • poly координаты вершин многоугольника в нужном порядке

<center> <imgsrc="karta.jpg"usemap="#panel"width="300" height="100" border="0" alt="Панель управления" title="Панель управления"></center> <mapname="panel"> <areahref="primer1.html"shape="rect"coords="15,15,82,82"alt="Зелёная кнопка" title="Зелёная кнопка"><areahref="primer2.html"shape="poly"coords="148,15,185,82,110,82"alt="Жёлтая кнопка" title="Жёлтая кнопка"><areahref="primer3.html"shape="circle"coords="250,50,33"alt="Красная кнопка" title="Красная кнопка"></map>

Таблицы в HTML