Создание активной области для карт-изображений в html c помощью тега map

Создание активной области для карт-изображений в html c помощью тега map

В данном уроке мы рассмотрим на практике, каким образом можно создать активные области на карте-изображении с помощью html-тега map. Этот тег был создан специально для решения таких задач. Где это может пригодиться? Думаю везде где позволит ваша фантазия. Что это дает?

Во-первых это дает экономию объема используемой графики, что сказывается на общей скорости загрузки страниц в целом.

Во-вторых это дает преимущество в выборе формы активного изображения, так как обычно все ссылки, или целые контейнеры которые делаются активными ссылками всегда имеют прямоугольную либо квадратную форму, мы можем управлять только шириной и высотой, но не можем управлять закруглением либо произвольной фигурой.

Например, возьмем контейнер div в котором содержится активная ссылка, внутри него разместим активную ссылку с помощью a href, и для наглядности сделаем ее занимающей весь контейнер, плюс подкрасим его для наглядности красным цветом.

Что это нам даст? - Это продемонстрирует нам то о чем я писал выше, что все ссылки либо блоки имеют изначально четырехугольную форму как бы мы не старались. Мы сейчас не будем говорить про более сложные варианты, также не будем учитывать новые свойства css3 border-radius, с помощью которых можно закруглять любой угол.

В данном примере рассматривается именно html5-составляющая. Итак наш красный прямоугольник, являющийся ссылкой будет выглядеть так:

<div style="width:200px; height:100px; background:red;">

<a href="#" style="height:100%; display:block;"></a>

</div>

С помощью такой нехитрой комбинации наш блок стал ссылкой, но он квадратный...А теперь представьте себе что вам нужно сделать изображение, допустим шапку сайта, в котором будет несколько активных областей, причем некоторые будут круглыми, некоторые квадратные, а некоторые нестандартной формы, как выйти из положения? Задать общий фон и наложить для каждой ссылки свою картинку (что и делает большинство) , но ссылки-то будут квадратные, плюс графика весит килобайты, а может мегабайты, а это медленная загрузка сайта, а тем у кого интернет слабенький, мучения.

Но выход есть, и поможет нам его найти html-тег <map> , с его спутниками <area> , которые как раз и отвечают за выполнение подобных задач по созданию на одном изображении своеобразной карты-ссылки, где каждому отрезку в отдельности, как и оставшемуся незанятому пространству можно присвоить свою ссылку. Так что при нажатии на эту область посетитель будет попадать в предопределенное место (html-страницу, новость, либо будет вызываться js функция) , тут решать вам.

Для начала возьмем одну общую картинку, в данном случае это будет просто прозрачный лист в формате png, на котором при помощи программы Adobe Photoshop либо любого другого графического редактора нарисуем четыре фигуры.

Первая фигура это закрашенная окружность, вторая фигура это закрашенный квадрат, третья фигура-ромб, а четвертая фигура будет закрашенный треугольник, но не простой, а как бы трехмерный, для этого после того как он нарисован, выделяем ровно половину, немного экспериментируем с яркостью, в результате чего наш треугольник становится как бы из двух оттенков.

Вот эти отличающиеся друг от друга части и будут разными ссылками, ведущими на разные страницы. А все оставшееся пространство сделаем ссылкой, при нажатии на которую будет появляться всплывающий алерт.

Итак, клавиатуру к бою..Создание изображения мы пропускаем так как это не так уж трудно, тем более нужен не графический шедевр а всего лишь пара - тройка геометрических фигур, поэтому будем считать что она уже есть, с разрешением 300*300 , откликается на имя map. gif и начнем с разметки:

1) Создаем документ html, допустим map. htmlДальше в нем создаем контейнер, в котором пропишем путь к нашей картинке под названием map. gif, и чтобы обозначить ее в виде карты, прописываем атрибут usemap, который дает понять браузеру что эта картинка является интерактивной картой, на которой можно выделить активную область:

<div class="mymap"> <img src="map. gif" alt="Активное изображение" usemap="#my_map"> </div>

Начало положено, на данный момент мы имеем контейнер с активным изображением, но если открыть в браузере, то мы увидим просто картинку, и при наведении, клике и тд ничего не произойдет, так как нужно создать активную область, поэтому продолжим:

2) Создаем контейнер для активных областей при помощи тега map, не забыв при этом что он имеет закрывающий тег:

<map id="my_map" name="my_map"></map>

3) Теперь нужно создать сами области-ссылки для фигур при помощи тегов area, которые должны располагаться между открывающим и закрывающим тегом map.

A) Первую область создадим круглую. Для этого есть атрибут shape с параметром circle. И естественно нужно указать координаты. Для этого есть атрибут coords. У областей в виде окружности задается 3 числа : x, y,z - что значит координаты по горизонтали и вертикали, и радиус. Ссылка на страницу задается атрибутом href.

<area title="Это окружность. Нажимай скорей!" shape="circle" coords="63,67,55" href="circle. html" alt="Это окружность"> б) Вторым на очереди у нас идет квадрат. Отличие от круглой фигуры в том, что для выделения прямоугольной или квадратной области используется атрибут shape="rect" , и в атрибуте coords задается величина x1y1,x2y2/ . Это значит что нужно просто выбрать точку по x1y1-это начало, x2y2 это конец. Получается допустим если вы выбрали х1у1 0,0 а х2у2 10,10 то получите квадратик 10*10 от левого верхнего угла.

<area title="Это квадрат. Нажимай скорей!" shape="rect" coords="215,133,274,190" href="rect. html" alt="Это квадрат"> в) Третьим мы разберем атрибут default, так как он является самым легкоусваиваемым в данном уроке. С его помощью можно обозначить все оставшееся пространство, не занятое другими фигурами, чтобы нажав за пределами фигуры, посетитель либо переходил в нужном направлении, либо появлялась нужная информация. Например чтобы при клике по свободной области появлялась надпись, добавим событие onclick:

<area title="Это свободная область. Нажимай скорей!" shape="default" href="#" onclick="alert('Это свободная область изображения, на которой можно разместить еще фигуры, либо сделать открытие какой-нибудь страницы по клику, или же как вы видите в данном случае, вывод на экран сообщения по клику.')" alt="Это свободная область"> г) И напоследок рассмотрим более сложный вариант фигуры, я бы даже сказал не более сложный а более многофункциональный и нестандартный. Это атрибут shape="poly" , который позволяет размечать многогранные области, в нашем случае с его помощью я обозначил ромб и треугольник, разделенный на две части. Каждая из этих фигур использует именно shape="poly". Отличается он от предыдущих фигур тем что рисует отрезок от и до указанной координаты, которых может быть N-число. Тоесть : x1y1,x2y2,x3y3,x4y4.... Получается что можно обволакивать очень замысловатые области.

<area title="Это ромб. Нажимай скорей!" shape="poly" coords="246,14,290,58,244,106,198,60" href="rombrect. html" alt="Это ромб">

<area title="Это правая часть треугольника. Нажимай скорей!" shape="poly" coords="59,215,119,300,59,300" href="treugr. html" alt="Это правая часть треугольника">

<area title="Это левая часть треугольника. Нажимай скорей!" shape="poly" coords="60,215,0,300,58,300" href="treugl. html" alt="Это левая часть треугольника">

Вот мы и разобрали на примере, как можно с помощью тега map и вложенного area создавать различные активные области - ссылки на одном изображении. Если вдруг картинки отключены, то для этого прописывается тег alt="альтернативный текст" , так что в любом случае ссылку будет видно. Весь исходный код, воссозданный нами в данном html5-примере(уроке) выглядит так :

<div class="mymap">

<img src="map. gif" alt="Активное изображение" usemap="#my_map">

</div> <map id="my_map" name="my_map">

<area title="Это окружность. Нажимай скорей!" shape="circle" coords="63,67,55" href="circle. html" alt="Это окружность">

<area title="Это квадрат. Нажимай скорей!" shape="rect" coords="215,133,274,190" href="rect. html" alt="Это квадрат">

<area title="Это ромб. Нажимай скорей!" shape="poly" coords="246,14,290,58,244,106,198,60" href="rombrect. html" alt="Это ромб">

<area title="Это правая часть треугольника. Нажимай скорей!" shape="poly" coords="59,215,119,300,59,300" href="treugr. html" alt="Это правая часть треугольника" /> <area title="Это левая часть треугольника. Нажимай скорей!" shape="poly" coords="60,215,0,300,58,300" href="treugl. html" alt="Это левая часть треугольника">

<area title="Это свободная область. Нажимай скорей!" shape="default" href="#" onclick="alert('Это свободная область изображения, на которой можно разместить еще фигуры, либо сделать открытие какой-нибудь страницы по клику, или же как вы видите в данном случае, вывод на экран сообщения по клику.')" alt="Это свободная область"> </map>

Но для того чтобы урок не прошел даром, ведь не факт что его усвоят все и сразу, ниже есть иконка архива, нажав на которую можно скачать данный пример полностью, включая дополнительные страницы, на которые перекидывает при нажатии на фигуру. Также внизу присутствует интерактивный онлайн редактор, в котором данный пример отображен, и можно поэкспериментировать с исходным кодом. Так что желаю удачи в освоении.


Карта сайта


Информационный сайт Webavtocat.ru