Задача: написать "курс молодого бойца" по созданию карт изображений
Предположим, что вы, как HTML-верстальщик, получаете задание. Есть GIF-рисунок размером 220*140 пикселей с изображением карты трех прибалтийских государств:
Необходимо, чтобы при клике по территории каждого государства происходил переход по соответствующей ссылке.
Не зная о существовании карт изображений, решить такую задачу почти невозможно. Итак, в HTML, начиная с версии 3.2, существует тег <map>, который позволяет "разметить" на рисунке произвольные области со своими ссылками. Каждой области соответствует собственный вложенный тег <area>. Привязка карты и изображения осуществляется через атрибут name тега <map> и атрибут usemap тега <img>.
Схематично, вся система выглядит вот так:
<map name="map1">
<area 'здесь перечисляются атрибуты, задающие параметры области' />
<area 'здесь перечисляются атрибуты, задающие параметры области' />
<area 'здесь перечисляются атрибуты, задающие параметры области' />
</map>
Для тега <area> описываются атрибуты, с помощью которых можно задать характер области на карте:
- alt — альтернативный текст для данной области;
- href — адрес, по которому с этой области уйдет пользователь после клика;
- target — имя окна или фрейма (аналогично тегу <a>);
- shape — форма области;
- coords — координаты области;
Последние два атрибута рассмотрим подробнее.
shape
Этот атрибут принимает три значения по форме, которую могут принимать описываемые области:
- rect — прямоугольник;
- circle — окружность;
- poly — - многоугольник;
В нашем примере необходим многоугольник (poly), т.к. ни окружностью, ни прямоугольником описать сильно изрезанную границу прибалтийских государств не получится.
shape
Этот атрибут задает координаты области, формат которых зависит от выбранной ранее формы. Точка отсчета (0, 0) — это верхний левый угол изображения.
Если область задана как прямоугольник (rect), то задается всего 4 числа: координаты X и Y его верхнего левого угла, длина и высота. Всё в пикселях. Пример: coords="20, 30, 40, 35".
Если область — окружность (circle), то задается 3 числа: координаты X и Y центра окружности и её радиус, например: coords="50, 40, 10".
В случае многоугольника (poly) придется перечислитьчерез запятую координаты X и Y всех составляющих точек. Рабочий пример, относящийся к нашей карте смотрим ниже:
<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>
Пример работающей карты изображений (imagemap).
Конечно, можно самому вымерять координаты каждой точки и вносить их в код. Однако, удобнее воспользоваться программными продуктами, которые облегчат эту задачу, например, платной Adobe ImageReady. Если вы знакомы с качественными бесплатными программами для создания карт изображений – пишите в комментах.
Пример оттуда.
нашел удобную штуку, триал на 100 сейвов/30 дней
http://www.boutell.com/mapedit/download.html, (это после 3-х онлайн редакторов и 2-х десктопных) .
А за статью спасибо.. после пол дня бесполезного блуждания, у вас в один миг освоил imagemap ,и как бонус освоил canvas :) которого раньше почемуто боялся))
Спасибо за ссылку на mapedit.