< к оглавлению
Карта изображений позволяет присвоить различным зонам одного рисунка, называемым активными областями, различные гиперссылки.
Общая схема создания карты изображений:
<img src="адрес_рисунка" usemap="#имя_карты">
<map name="имя_карты">
<area shape="форма" coords="координаты" href="адрес_перехода">
<area shape="форма" coords="координаты" href="адрес_перехода">
. . . . . . . .
</map>
Расшифровка:
img - image - англ. изображение
src - source - англ. источник
map - англ. карта
name - англ. название
area - площадь, пространство, зона
shape - англ. форма
coords - coordinates - англ.координаты
Существуют три вида формы активных областей:
shape=rect
Активная область в форме прямоугольника. (rect - rectangle - англ. прямоугольник)
<area shape=rect coords="x1,y1,x2,y2" href="адрес_перехода">
где x1,y1 и x2,y2 - коодинаты противоположных углов прямоугольника
shape=circle
Активная область в форме круга. (circle - круг)
<area shape=circle coords="x,y,r" href="адрес_перехода">
где x и y - координаты центра круга, а r - его радиус
shape=poly
Активная область в виде многоугольника. (poly - polygon - многоугольник)
<area shape=poly coords="x1,y1,x2,y2,x3,y3,..." href="адрес_перехода">
где x1,y1,x2,y2,x3,y3 и т.д. - координаты углов многоугольника
Привожу пример для исследования. В нижерасположенном рисунке при щёлчке в левой части или в верхнем правом углу осуществляется переход к пустой странице, при щелчке по центру - к рисунку, в ином случае никакого результата нет.
<img src=big_picture.jpg border=0 width=400 height=300 usemap=#my_map>
<map name=my_map>
<area shape=rect coords="0,0,150,299" href=empty.htm alt="к пустой странице">
<area shape=circle coords="200,150,50" href=pic.jpg alt="к рисунку">
<area shape=poly coords="200,0,399,0,399,150" href=empty.htm target=_blank alt="к пустой странице (2)">
</map>
< к оглавлению