Карты изображений

Это один из самых интересных внутренних резервов HTML, который позволяет прикреплять ссылки на другие документы, к разным частям изображенного. Нажимая на них мышкой, можно осуществить самые разные манипуляции. К примеру: перейти на другие документы, используя ту или другую ссылку и так далее.

Технология Image map используется в самых разных сферах. Но, наиболее часто применяется - при создании графических меню. Когда формируется одно масштабное изображение с элементами меню. Причем каждому месту изображения назначается какое-то действие. Эту технологию можно использовать при формировании простейших ГИС-подобных систем (с картографированными возможностями).

Чтобы активировать поддержку карты для изображений, размещенных на html-странице вводится дополнительный параметр usemap тэга <img>:

<img src="url" usemap="[URL]#имя_карты" />. Он просто включает эту поддержку.

Usemap описывает ссылку документа в котором располагается карта изображения.. Карта может

находиться в этом же документе, где и изображение, а может - и в каком-то другом. Последнее дает

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

необходимо тогда, когда, у Вас несколько карт, в разных документах. Если данного URL нет, то

указанная карта будет искаться в текущем документе.

</map>
Этот тэг производит описание карты изображения, а также ее имени. Тэг <area> описывает параметры и поведение для отдельной области изображения. У этого элемента нет закрывающего тэга.

Описание вспомогательных атрибутов тэга <map>:

name
Задает непосредственное имя карты. По данному имени происходит поиск карты в процессе обращения документу.

Описание вспомогательных атрибутов тэга <area>:

shape
Для описываемой области shape задает форму - геометрическую фигуру. Разная трактовка установленных координат области зависит от избранной формы.

default

ect

circle

poly

областью изначально являются все точки изображения;

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

область изображается кругом, а положение его радиуса
и центра задают координаты;

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

Значения Описание

coords
Задает координаты области по осям X и Y, что соответственно - по высоте и ширине экрана. X и Y показываются в пикселях, а отделяются запятой, как и координаты любой вершины.

href
Задает URL ссылку на выполняемое действие или документ

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

alt
Задает подсказку: при наведении на область изображения она выводится с помощью мышки.

target
Определяет фрейм или же окно, в котором упомянутая ссылка будет открыта. Этот атрибут был рассмотрен ранее.

Пример:
------------------------------------------------------------------------------------------------------------

<img src="/pic/primer.png" border=0 usemap="#map" />
<map name="map">
<area shape=poly coords="115,158, 162,48, 238,138" alt="Конусная фигура" />
<area shape=poly coords="290,45, 365,28, 420,55, 420,155, 340,165, 295,130" alt="Кубическая фигура" />
<area shape=circle coords="312,274, 65" alt="Сфера" />
<area shape=poly coords="35,255, 88,155, 200,270, 55,325" alt="Пирамида" />
</map>

------------------------------------------------------------------------------------------------------------