Практически на всех сайтах компаний, присутствует раздел «Контакты». Если у компании есть несколько филиалов в разных регионах страны, то на странице с контактами можно разместить карту, на которой обозначить города, где находятся филиалы компании. Еще будет замечательно, если название городов будут выполнены в виде ссылок, а при клике на них будет появляться всплывающий блок со схемой проезда к офису в выбранном городе. Города на карте будут обозначены небольшими квадратами, при наведении указателя мыши на название города, его обозначение на карте будет меняться.
В этой заметке, я расскажу, как это можно реализовать с помощью jQuery.
Начну, как обычно с подготовки. Нужно создать несколько графических изображений: карту и схемы расположения офисов в городах. Также нужно сделать спрайт с квадратами, которые будут обозначать города на карте в 2 состояниях: обычном и при наведении мыши.
Скачать архив с изображениями
Города будут обозначаться на карте в виде ссылок. Они будут абсолютно позиционированы относительно карты. Чтобы вычислить координаты расположения городов на карте, нужно воспользоваться направляющими в psd-макете.
Так можно узнать координаты всех городов. Теперь создадим структуру странички, на которой будет расположена карта.
HTML
<div id="imap">
<a href="#" id="klgd">Калининград</a>
<a href="#" id="spb">Санкт-Петербург</a>
<a href="#" id="msk">Москва</a>
</div>
<div id="container"></div>
Присвоим css-стили элементам страницы.
CSS
body{
font-family:arial;
position:relative;
}
/*контейнер для карты*/
div#imap{
width:700px;
height:394px;
margin:0 auto 10px;
background:url(images/map_bg.png) no-repeat;
position:relative;
}
/*города на карте*/
div#imap a{
position:absolute;
text-decoration:none;
background:url(images/b_sprite.png) no-repeat;
color:#000;
font-weight:bold;
padding-left:14px;
font-size:.7em;
}
div#imap a:hover{
background-position:0 -13px;
}
/*всплывающий блок с картой*/
div#container{
display:none;
position:absolute;
margin:0 auto;
background:#fff;
padding:10px;
border:1px solid #999;
top:50%;
left:50%;
}
/*город Калининград*/
a#klgd{
top:75px;
left:30px;
}
/*город Санкт-Петербург*/
a#spb{
top:97px;
left:95px;
}
/*город Москва*/
a#msk{
top:149px;
left:81px;
}
В блоке с идентификатором 'imap' будет находиться сама карта, а блок с идентификатором 'container' будет всплывающим – в нем будут располагаться изображения со схемами проезда к филиалам компании. Изначально этот блок будет скрыт, он будет появляться при клике по названию города. Блок будет выровнен по центру экрана. В зависимости от атрибута id ссылки, в блоке-контейнере будет появляться определенная схема проезда.
Теперь нужно «вдохнуть жизнь» в получившуюся страничку, добавив немного кода на jQuery.
jQuery
$(function(){
// предварительная загрузка изображений
var klgd = $('<img />').attr('src','images/klngr.png');
var msk = $('<img />').attr('src','images/msk.png');
var spb = $('<img />').attr('src','images/spb.png');
$('div#imap > a').click(function(event){
var elId = $(this).attr('id');
switch(elId){
case 'klgd' :
$('#container:not(:has(img))').append(klgd);
break;
case 'spb' :
$('#container:not(:has(img))').append(spb);
break;
case 'msk' :
$('#container:not(:has(img))').append(msk);
break;
default: elImgURI = false;
}
// ширина контейнера
var contwidth = $('#container').width();
var contheight = $('#container').height();
var w_mrg = contwidth/2 + "px";
var h_mrg = contheight/2 + "px";
$('#container').show();
$('#container').css({'margin-left':'-'+w_mrg});
event.preventDefault();
});
$('div#container').click(function(event){
$('#container img').remove();
$('#container').hide();
event.preventDefault();
});
});
После проведения всех выше указанных действий, получим страничку с картой, на которой будут отмечены города с филиалами компании, при клике на которые будут появляться схемы с расположением офисов в этих городах.
Надеюсь, что эта небольшая статья будет полезна читателям при создании страницы с контактами на сайте.
Демонстрация результата
