Интерактивная карта земельных участков

Привет друзья!

Сегодня я расскажу Вам как помочь купить земельные участки.

За основу я выбрал участки в коттеджном поселке Эко-Ольгино, который находится в Конаковском районе. Мы создадим интерактивную карту продажи недвижимости загородного комплекса. И нанесем подсказки. Например, при наведении курсора мыши на земельный участок будет всплывать дополнительная информация: купить участок у воды, купить участок у леса, купить участок без подряда, цена, площадь.

За основу я взял нарисованный план участков загородного комплекса Эко Ольгино. Используем тег "map", вот конструкция этого тега:

<img src="Путь к картинке" usemap="#map" class="map" /><map class="map" name="map"> <area shape="poly" coords="332,301,306,375,408,410" href="#" /></map>

Параметры атрибута "coords" в теге "area", можно задавать вручную, но я пошел более хитрым путем. С помощью Adobe DreamWeaver я нанес границы ссылок для каждого участка.

Карта поселка Эко Ольгино

Затем использовал скрипт [download id="13"]. Этот скрипт подсвечивает границы выделения, которые мы указывали в теге "map". Но чтобы его использовать нам нужно дополнительно указать еще пару параметров между тегами "head" нашего html документа.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script><script type="text/javascript" src="Путь к /jquery.maphilight.js"></script><!-- Указываем путь к нашему скрипту --><script type="text/javascript">	$(function() { $('.map').maphilight(); });</script>

Теперь у каждого участка указываем свойства, каким цветом будет подсвечиваться граница с помощью такого атрибута data-maphilight='{"fillColor":"964b00"}':

<map class="map" name="map"> <area shape="poly" coords="332,301,306,375,408,410" href="#" data-maphilight='{"fillColor":"964b00"}' /> </map>

Отлично! Теперь добавим подсказки при наведении курсора мыши на участок. Для этого мы указываем в head еще несколько строчек кода:

<script type="text/javascript">function over(tip){		tooltips = document.createElement('div');<!-- Создаем поле div для подсказки -->	document.body.appendChild(tooltips);	tooltips.innerHTML = tip;	tooltips.style.position = 'absolute';	tooltips.style.background = '#FFFFFF';<!-- Задаем цвет фона подсказки -->	tooltips.style.border = 'solid 1px #346fdc';<!-- Указываем границу для подсказок -->	tooltips.style.padding = '4px';	tooltips.style.zIndex = '10';	move();}		function move(e){	e = e || window.event	if (e.pageX == null && e.clientX != null )		{			var html = document.documentElement			var body = document.body			e.pageX = e.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0)			e.pageY = e.clientY + (html && html.scrollTop || body && body.scrollTop || 0) - (html.clientTop || 0)		}	tooltips.style.left = e.pageX + 15 + 'px';	tooltips.style.top = e.pageY + 15 + 'px';}function out(){	document.body.removeChild(tooltips);}	</script>

Осталось у каждого участка указать дополнительную информацию, с помощью следующей строки атрибутов:

 onmouseover="over('<b>Описание участка</b>Поддерживает HTML-теги<br />')" onmousemove="move(event)" onmouseout="out()"

В итоге, вот как у нас выглядит один участок со всеми настроенными функциями:

 <area class="lands" shape="poly" coords="543,519,585,505,562,452,524,467" onmouseover="over('Участок <b>№77</b><br />Площадь: <b>15,44</b> соток<br />Цена 1 сотки: <b>8000$</b><br />Итого: <b>123520$</b>')" onmousemove="move(event)" onmouseout="out()" data-maphilight='{"fillColor":"964b00"}' />

И это только для одного участка, у нас таких еще 108!

Интерактивная карта поселка