Сегментированные изображения позволяют создавать графические изображения с несколькими чувствительными областями - ссылками. Т.е. различные фрагменты одного изображения могут являться ссылками на различные ресурсы. Каждое изображение может содержать произвольное количество чувствительных областей.
Для задания чувcтвительных областей изображения используются теги <MAP>
и <AREA>
Тег <MAP>
определяет схему областей и имеет только 1 атрибут:
NAME
- имя схемы (карты) чувствительных областей.
Атрибуты вложенных в тег <MAP>
тегов <AREA>
определяют сами чувствительные области.
Каждый тег <AREA>
описывает только 1 область. Его атрибуты указывают форму области, ее координаты относительно левого верхнего угла изображения и ссылку, на которую должен указывать данный фрагмент изображения.
Атрибуты тега <AREA>
:
HREF
- URL адрес обекта, на который ссылается данная область.
SHAPE
- форма области. Может принимать следующие значения: RECT
, CIRC
, POLY
.
COORDS
- координаты области. Задание координат зависит от типа области:
форма области | COORDS |
RECT - прямоугольник |
COORDS="A,B,C,D", где A,B - координаты верхнего левого угла области. C,D - координаты правого нижнего угла области. |
CIRC - окружность |
COORDS="A,B,C", где A,B - координаты центра окружности. C - радиус окружности. |
POLY - многоугольник |
COORDS="A,B,C,D, ... ,A,B". Каждая пара задает координаты вершин многоугольника. Первая и последняя пары совпадают задавая замкнутую фигуру. |
IMG
необходимо указать атрибут USEMAP
.
Пример: Возьмем изображение: и создадим на нем 3 чувствительные области.
<map name="test"> <area href="/html/031/index.htm" shape="rect" coords="5,10,98,32" alt="HTMLHELP. Справочник по HTML"> <area href="/html/031/a.htm" shape="circ" coords="124,15,14"> <area href="/html/031/head.htm" shape="poly" coords="131,39,154,16,191,16,191,39,131,39"> </map>теперь прикрепим данную схему к изображению
<img src="/images/031/map_samp.gif" width=200 height=40 border="0" usemap="#test">А это - картинка с тремя чувствительными областями.