| malininss |
13.08.2014 12:27 |
Интерактивная карта с привязкой к таблице
Всем доброго дня!
Друзья, очень прошу помочь в создании интерактивной карты. Заранее извиняюсь за безграмотность, в программировании я практически ноль.
Есть код интерактивной карты. Нужно дописать javascript функцию, которая бы каждому участку на карте, например по его id, выставляла бы статус "куплен/не куплен". Еще желательно, чтобы при выставлении статуса "куплен", участок подсвечивался бы красным, "не куплен" - зеленым, но это уже второй вопрос.
Это необходимо, чтобы настроить передачу информации с таблицы на саму интерактивную карту.
Если это слишком трудоёмко, чтобы так просто объяснить, подскажите хотя бы, где можно поискать как это сделать.
Прошу прощения, если нарушил какие-либо правила форума, я здесь в первый раз.
Заранее всем огромное спасибо!
Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<title>Интерактивная карта</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="http://davidlynch.org/projects/maphilight/jquery.maphilight.js"></script>
<script type="text/javascript">$(function() {
$('.map').maphilight({fade: false});
});</script>
<script type="text/javascript">
function over(tip)
{
tooltips = document.createElement('div');
document.body.appendChild(tooltips);
tooltips.innerHTML = tip;
tooltips.style.position = 'absolute';
tooltips.style.background = '#ffffff';
tooltips.style.border = 'solid 0px #3caa3c';
tooltips.style.padding = '7px';
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>
</head>
<body>
<img src="http://s41.radikal.ru/i094/1408/04/b6c0239f13f7.jpg" class="map" usemap="#map" />
<map class="map" name="map">
<area shape="poly" coords="285,520,303,490,332,501,310,534" href="#"
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='{"stroke":false,"fillColor":"00ff00"}' />
</map>
|