Карта изображений (Image Map) позволяет привязывать ссылки к фрагментам изображения. Щелкая мышью на отдельных частях изображения, пользователь может переходить по той или иной ссылке на разные Web-страницы.
Предположим, что вы, как HTML-верстальщик, получаете задание. Есть GIF-рисунок размером 220*140 пикселей с изображением карты трех прибалтийских государств:
Необходимо, чтобы при клике по территории каждого государства происходил переход по соответствующей ссылке.
[spoiler]Не зная о существовании карт изображений, решить такую задачу почти невозможно. Итак, в HTML, начиная с версии 3.2, существует тег <map>, который позволяет "разметить" на рисунке произвольные области со своими ссылками. Каждой области соответствует собственный вложенный тег <area>. Привязка карты и изображения осуществляется через атрибут name тега <map> и атрибут usemap тега <img>.
Схематично, вся система выглядит вот так:
<img usemap="#map1" src="/i/pribaltika.gif" width="220" height="140" alt="" /> <map name="map1"> <area 'здесь перечисляются атрибуты, задающие параметры области' /> <area 'здесь перечисляются атрибуты, задающие параметры области' /> <area 'здесь перечисляются атрибуты, задающие параметры области' /> </map> |
Для тега <area> описываются атрибуты, с помощью которых можно задать характер области на карте:
- alt — альтернативный текст для данной области;
- href — адрес, по которому с этой области уйдет пользователь после клика;
- target — имя окна или фрейма (аналогично тегу <a>);
- shape — форма области;
- coords — координаты области;
Последние два атрибута рассмотрим подробнее.
shape
Этот атрибут принимает три значения по форме, которую могут принимать описываемые области:
- rect — прямоугольник;
- circle — окружность;
- poly — многоугольник;
В нашем примере необходим многоугольник (poly), т.к. ни окружностью, ни прямоугольником описать сильно изрезанную границу прибалтийских государств не получится.
coords
Этот атрибут задает координаты области, формат которых зависит от выбранной ранее формы. Точка отсчета (0, 0) — это верхний левый угол изображения.
Если область задана как прямоугольник (rect), то задается всего 4 числа: координаты X и Y его верхнего левого угла, координаты X и Y его нижнего правого угла. Всё в пикселях. Пример: coords="20, 30, 40, 35".
Если область — окружность (circle), то задается 3 числа: координаты X и Y центра окружности и её радиус, например: coords="50, 40, 10".
В случае многоугольника (poly) придется перечислить через запятую координаты X и Y всех составляющих точек. Рабочий пример, относящийся к нашей карте смотрим ниже:
<map name="map1"> <area shape="poly" alt="Эстония" coords="144,44, 136,47, 136,51, 145,54, 143,68, 141,73, 142,82, 144,90, 149,93, 149,100, 157,100, 161,102, 166,100, 174,91, 183,88, 183,86, 187,83, 208,83, 208,85, 214,85, 217,80, 217,78, 210,76, 205,69, 206,62, 198,43, 198,40, 193,39, 192,30, 186,28, 186,25, 181,24, 181,21, 177,20, 171,14, 168,15, 165,13, 163,17, 158,17, 154,21, 154,24, 156,24, 156,25, 153,25, 144,29, 145,34, 143,39, 151,41, 149,44" href="#Эстония"> <area shape="poly" alt="Латвия" coords="52,12, 43,16, 52,29, 58,30, 58,36, 56,51, 58,60, 63,61, 67,70, 67,72, 66,75, 71,74, 74,88, 84,106, 84,115, 82,120, 86,123, 90,123, 92,127, 94,133, 100,133, 108,135, 115,137, 128,126, 128,124, 131,123, 131,116, 139,115, 146,115, 146,108, 149,104, 149,93, 144,90, 142,82, 141,73, 143,68, 145,54, 136,51, 136,47, 130,48, 114,57, 108,57, 99,50, 100,39, 107,34, 112,21, 115,21, 115,16, 110,13, 104,6, 89,3, 81,7, 71,3, 63,7, 54,9" href="#Латвия"> <area shape="poly" alt="Литва" coords="13,80, 13,70, 9,65, 13,63, 13,60, 19,59, 25,59, 31,54, 30,51, 25,43, 26,30, 29,21, 39,16, 43,16, 52,29, 58,30, 58,35, 56,50, 58,60, 63,61, 67,70, 67,72, 66,75, 71,74, 74,87, 84,106, 84,115, 82,120, 77,121, 73,116, 68,117, 57,120, 48,120, 38,115, 34,116, 31,118, 29,118, 29,110, 30,107, 26,105, 10,105, 7,99, 8,93, 3,92, 3,86" href="#Литва"> </map> |