Карты изображений
Наряду с использованием изображений в качестве иллюстраций к тексту или элементов оформления Web-страницы, в HTML предусмотрена возможность создания карт изображений (imagemap), отдельные области которого могут являться гиперссылками на другие разделы или страницы Web-сайта. В общем виде это соответствует использованию изображения в качестве гиперссылки с тем
отличием, что на одной карте изображений можно создать несколько несовпадающих областей, и соответственно, гиперссылок.
Применение таких карт изображений удобно для создания географических справочных систем, путеводителей, карт погоды. Также карты изображений находят широкое применение при создании сложных графических меню.
В HTML предусмотрены два варианта обработки карт изображений: обработка карты изображения непосредственно браузером и передача на сервер координат указателя мыши для дальнейшей обработки.
Карты изображений, обрабатываемые браузером
Автономные (обрабатываемые браузером) карты изображений описываются с помощью атрибута usemap тега <img>:
<img src="figure_1.jpg" usemap="#coordinates">
Где “figure_1.jpg” – имя файла, содержащего изображение, "#coordinates” – ссылка на часть HTML-документа, описывающего координатные области.
Координатные области карты изображений определяются при помощи тегов <map> и <area>.
Тег <area> описывает координаты отдельной области изображения, параметры которой и адрес гиперссылки задаются при помощи атрибутов shape, coords и href.
Атрибут shape определяет форму области-ссылки. По умолчанию ему присваивается значение shape="rect" – прямоугольник. Также область может быть описана в форме окружности (shape="circle") или многоугольника (shape="poly").
Атрибут coords определяет размеры области. В зависимости от типа размечаемой области может меняться значение этого атрибута. Так для shape="rect" указываются две пары координат (левого верхнего и правого нижнего угла прямоугольника) в пикселях. Для shape="circle" указываются координаты центра окружности и ее радиус, а для shape="poly" последовательно указываются
координаты вершин многоугольника.
Атрибут href задает URL-адрес ссылки для перехода в случае щелчка мышью на выбранной области.
Заданные при помощи тегов <area> координатные области изображения ограничиваются при помощи тегов <map>-</map>.
Теги изображений
| Тег | Описание |
| <img> | Определяет изображение |
| <map> | Определяет карту ссылок |
| <area> | Определяет активную область внутри карты ссылок |
Далее, где-нибудь внизу, или в самом начале страницы, но в пределах тега
<body> добавляем собственно «карту ссылок», как называется эта технология:
<map name="coordinates">
<area shape="rect" coords="2,2,60,74" href="ссылка на один сайт">
<area shape="rect" coords="61,4,112,76" href="ссылка на другой сайт">
</map>
Естественно, мы можем добавить к этим двум областям и третью строку, и четвертую, и сколько угодно. Принцип чтения этого кода браузером, как обычно, сверху вниз. Поэтому, если ваши области чуточку перекрываются, то та, что прописана в первой строке, будет лежать «сверху», чем та, что прописана строкой ниже.
Как задаются координаты? Координаты задаются
отсчитывая от левого верхнего угла картинки по пикселу в направлении левого верхнего угла и правого нижнего угла. В нашем случае, у первой картинки отступ 2 пиксела слева и сверху у 1 контрольной точки, а правый нижний угол, соответственно, отстоит от левого верхнего угла картинки на 60 слева и 74 пиксела сверху. Алгоритм понятен? Для тех, кто не допер, повторюсь: координаты левого верхнего угла задаваемой области относительно левого верхнего угла картинки + координаты правого нижнего угла области относительно все того же верхнего левого угла картинки. (Здорово! Даже я понял!) Конечно, вручную это все высчитывать долго и муторно. Гораздо проще воспользоваться одной из специальных программ, автоматизирующих все рутинные процедуры. Вот например, в **DreamWeaver MX** есть такая функция в виде простого «растягивания» области над картинкой и назначения ей ссылки. Никаких цифр при этом вводить не нужно – программа считает все сама. От вас требуется лишь ПОНИМАТЬ что творится в коде и уметь распознать эту фичу в коде других страничек, если когда-либо вам потребуется разобраться в устройстве других сайтов.
Координатные карты могут быть не обязательно квадратными – можно задать область-окружность или произвольную область со сложным изломанным контуром.
Рассмотрим работу с окружностью:
В первом случае зона задана окружностью, во втором – многоугольником. Смотрим код:
<img src="figure_2.jpg" usemap="#coordinates2">
строка тега картинки изменяется только в имени карты координат. Полагаю, уже все додумались, что одинаковые имена элементов в пределах одной странички недопустимы. Это касается, кстати говоря, и якорей.
А вот в вынесенных отдельно координатных тегах у нас изменения более заметные:
<map name="coordinates2">
<area shape="circle" coords="84,28,26" href="http://google.ru/">
<area shape="poly" coords="65,3,51,41,78,58,109,48,110,71,7,75,4,6,34,5" href="http://yandex.ru/">
</map>
Первая строчка, как вы уже наверняка догадались, не что иное, как тот самый круг (в теге area shape указано “circle”, что по-английски будет «окружность»). Координаты у нее высчитываются по методу определения центра окружности – это первые две цифры, а третья цифра – это
радиус нашей окружности. Именно радиус, а не диаметр! (Для тех, кто в танке поясняю – радиус, это расстояние от ЦЕНТРА окружности до ее края. Центр в свою очередь – это та точка, которая равноудалена от любой точки на краю окружности)
Вторая строка кода – это наша многоугольная область, заполняющая большую часть свободного пространства вокруг окружности. В теге
area shape у нее значится
“poly”, что означает многоугольник. Координаты тут вычисляются парами цифр (расстояние от левого и расстояние от верхнего краев). Каждой точке соответствуют две координаты. Точек может быть сколь-угодно большое множество, но злоупотреблять не стоит – «срубайте» углы, упрощайте систему – незачем громоздить жуткоплавные изгибы только для красоты. Поверьте, примерной разметки на скорую руку тут вполне хватит. Как только точек становится больше трех, наш потенциальный многоугольник становится треугольником. Ссылка, ему назначенная, будет срабатывать между точками. Если добавить еще одну точку (четвертую), но расставить их так, чтоб эти самые точки как бы пересекали собственные соединительный линии, то фигура может превратиться в подобие двух треугольников, сросшихся углами.