Feb 21 2011 at 12:40

Интерактивная карта. HTML+CSS+JS

Invite pending

Добрый день! Хочу предоставить Вашему вниманию так скажем небольшой туду лист по созданию карты с подсветкой областей на связке HTML+CSS+JS.

Задача

Вроде бы задача тривиальная, но необходимого мне материала я в интернете не нашёл. Точней нашёл, но всё было разрозненно и по кускам, либо с использованием тех технологий, который не подходили. А необходимо было сделать карту с подсветкой областей, а также выбора области на HTML+CSS+JS.

Рисуем карту

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

Верстаем

После усвоения всего прочитанного материала, всё оказалось проще простого.

С помощью инструмента Polygon Hotspot tool в Adobe Fireworks создаём разделение на необходимые нам областям, при наведении на которые будет подсвечиваться данная область.
Экспортируем всё это дело в HTML, соответствующей командой в меню. На выходе получаем карту ссылок для нашей карты. Пример:
Copy Source | Copy HTML <map name="m_map" id="m_map"> <area shape="poly" coords="253,280,258,280,261,285,267,287" title="1" alt="1" /> <area shape="poly" coords="253,280,258,280,261,285,267,287" title="2" alt="2" /> <area shape="poly" coords="253,280,258,280,261,285,267,287" title="3" alt="3" /> <area shape="poly" coords="253,280,258,280,261,285,267,287" title="4" alt="4" /> </map>
Далее встаёт вопрос как реализовать подсвечивание областей нашей карты. Я поступил следующим обазом. Создал три пустых картинки с неоходимым бэкграундом, которые будут являться нашей картой, подсвеченной областью в текущий момент и выбранной областью, соответсвенно. Код ниже. Copy Source | Copy HTML <img id="map" src="img/empty.png"/> <img id="activ_r" src="img/empty.png"> <img id="onover_r" src="img/empty.png" usemap="#m_map"> Тэг usemap со значением #m_map подключает раннее созданную карту ссылок.
Сама карта есть. Необходимы подсвечиваемые области. Берёмся снова за фотошоп и получаем следующее.


Теперь остаётся лишь создать обработчик на JS, который будет реагировать на наведение и нажатие на наши области. Код:

Copy Source | Copy HTML
window.onload = function()
{
    var aw = new Array;
    aw = document.getElementsByTagName("area");
    var i =  0;
    while(aw[i])
    {
        aw[i].onmouseover = function(){document.getElementById('onover_r').className = 'r' + this.alt;}
        aw[i].onmouseout = function(){document.getElementById('onover_r').className = 'r0';}
        aw[i].onclick = function(){document.getElementById('activ_r').className = 'r' + this.alt;}
        i+=1;
    }
} 




(Пока всё это писал, пришла мысль, что смену картинок при наведении можно реализовать и с помощью CSS, но я уже сделал так.)




В дополнение к нашему бутерброду из 3х слоёв CSS код:

Copy Source | Copy HTML
#map{
    width:600px;
    height: 732px;
    background:url("../img/map.jpg") no-repeat;
    position:absolute;
    top: 18px;
}
 
#onover_r {
    width:600px;
    height: 732px;
    display:block;
    position:absolute;
    top: 18px;
}
 
#activ_r {
    width:600px;
    height: 732px;
    display:block;
    position:absolute;
    top: 18px;
}
 
.r0{background:none;}
.r1{background:url("../img/map_r.png") 0px 0px;}
.r2{background:url("../img/map_r.png") -600px 0px;}
.r3{background:url("../img/map_r.png") -1200px 0px;}
.r4{background:url("../img/map_r.png") -1800px 0px;}
.r5{background:url("../img/map_r.png") -2400px 0px;}
.r6{background:url("../img/map_r.png") -3000px 0px;}
.r7{background:url("../img/map_r.png") -3600px 0px;}
.r8{background:url("../img/map_r.png") -4200px 0px;}
.r9{background:url("../img/map_r.png") -4800px 0px;}
.r10{background:url("../img/map_r.png") -5400px 0px;}
.r11{background:url("../img/map_r.png") -6000px 0px;}
.r12{background:url("../img/map_r.png") -6600px 0px;} 







Оптимизация


Вы спросите почему я не соединил карту и области в одну картинку? А всё для того, чтобы уменьшить вес картинки, но при этом не потерять качества. Я не смог отказаться от PNG 24 исходной карты, поэтому области вынес в отдельную картинку с расширением PNG 8 c 64 цветами. В итоге у меня вышла карта размером 92кб, а области 34кб. Можно конечно ещё уменьшить размер, но я не стал фанатеть. Меня устроил такой результат. Вот что получаем в конце: 



На этом всё. Живого примера к сожалению не выкладываю, т.к. рабочий хостинг не выдержит, а другого нет. Вот ссылка на скачивание архива с файлами.



С Уважением.

Hubs:

Lumber room