Главная / Верстка / Веб решения / Создание активной области для карт-изображений - тег map

Создание активной области для карт-изображений - тег map


29.06.2013 18:118038

В данном уроке мы рассмотрим на практике , каким образом можно создать активные области на карте-изображении с помощью 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>


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



Вы не можете скачивать прикрепленные файлы.
Пожалуйста, включите JavaScript!

Map , Пример С Уроком





«Создание активной области для карт-изображений - тег map» - Похожие страницы

Профессия ведущий рассылок Создание рассылок Большинство сайтов имеют специальные рассылки, на которые всегда посетители ресурса имеют возможность подписаться. Для быстрого создания таких рассылок на электронную почту или в виде СМС сообщений использую...
Компания ТехноНебо Создание и продвижение сайта В наши дни практически каждый понимает, что успешное ведение бизнеса в Интернете практически не возможно без создания сайта. А Интернет является первым местом, куда мы обращаем свое внимание, когда желаем пр...
сайт-визитка Создание сайтов, их виды Предлагает Вам создание сайтов следующих типов: сайт-визитка, официальный сайт, сайт-блог, интернет-магазин, корпоративный сайт. В основном сайт-визитка подойдет тем, кому нет необходимости содержать отдель...
Создание сайтов в Пятигорске - студия Topsite +    Веб-студия TOPSITE занимается созданием эксклюзивных сайтов на КМВ и по всей России.    Важность интернет-сайта для компании сегодня трудно переоценить. По качеству сайта клиенты судят о Вашей фирме в це...
Правильное создание навигационного меню для сайта О том, как сделать сайт «вкусным» для посетителей и поисковых систем, написано немало. Но в основном говорится о поддержании сайта в актуальном состоянии, о регулярном обновлении контента на ресурсе. Но не м...

Комментарии отсутствуют
Добавление комментариев доступно только зарегистрированным пользователям