Изображения-карты, карты ссылок
Изображения-карты (IMAGEMAP) или карты ссылок дают возможность превращать в гиперссылку часть изображения. Изображение разбивается на зоны, каждая из которых превращается в отдельную графическую гиперссылку.
Для создания изображения-карты подойдет любое изображение, которое веб-мастер должен предварительно разбить на определенные зоны, которые могут быть трех типов:
- rect - прямоугольная зона. Координаты прямоугольной зоны задаются двумя точками - координатой левого верхнего угла, координатой правого нижнего угла.
- poly - многоугольник. Задаются координаты каждой точки многоугольника.
- circle - круг. Задается координата центра круга и его радиус.
Изображения-карты создают в три этапа.
На первом этапе создают изображение при помощи тега IMG
<IMG SRC="map.jpg">
На втором этапе создают карту при помощи тега MAP
<MAP NAME="sample_map">
Атрибут NAME является обязательным, он задает уникальное имя карты в пределах данной html-страницы. Это имя однозначно идентифицирует данную карту. Атрибут NAME обязательно должен начинаться с буквы, и может содержать только латинские буквы, цифры и знаки подчеркивания.
После того, как изображение и карта созданы, надо привязать карту к изображению при помощи атрибута USEMAP тега IMG
<IMG SRC="map.jpg" USEMAP="#sample_map">
В атрибуте USEMAP указывается значение атрибута NAME карты-ссылок, с обязательным добавлением знака # перед именем.
На третьем этапе веб-мастер разбивает изображение на нужные зоны при помощи тега AREA, который имеет следующий синтаксис:
<AREA [SHAPE="rect|circle|poly"] COORDS="<параметры>" HREF="<URL>">
В качестве координат изображения выступают пиксели изображения - 1 единица = 1 пикселю. Отсчет ведется от верхнего левого угла изображения - это точка с координатами (0,0).
Атрибут SHAPE описывает форму зоны карты ссылок, атрибут COORDS назначает координаты конкретной зоны. Количество точек в этом атрибуте зависит от формы зон.
- rect - COORDS="<X1>,<Y1>,<X2>,<Y2>"; X1, Y1 - координаты левого верхнего угла зоны; X2, Y2 - координаты правого нижнего угла зоны;
- circle - COORDS"<X_center>,<Y_center>,
; X_center, Y_center - координаты центра круга; R - радиус круга; - poly - COORDS="<X1>,<Y1>,<X2>,<Y2>..<Xn>,<Yn>"; Xn, Yn - координаты соответствующей вершины многоугольника.
Если при вводе координат произошла ошибка, то браузер воспринимает область пересечения как часть той зоны, которая описана первой. Если координаты выходят за границы изображения, то они игнорируются браузером.
Атрибут HREF указывает страницу на которую ведет данная зона карты ссылок.
Ниже представлена простая карта ссылок с исходным кодом. Изображение условно разбито на четыре прямоугольных области.
ПРИМЕР:
<img src="img/map.jpg" width="132" height="121" usemap="#australia"> <map name="australia"> <area shape="rect" coords="0,0,68,60" href="1.html" target="_blank"> <area shape="rect" coords="68,0,132,60" href="2.html" target="_blank"> <area shape="rect" coords="0,60,68,120" href="3.html" target="_blank"> <area shape="rect" coords="68,60,132,120" href="4.html" target="_blank"> </map> |
