Интерактивная карта - SVG.

 
0
 
JavaScript
ava
Flammel | 02.11.2011, 02:02
Здравствуйте. Помогите пожалуйста с решением совсем не сложной задачи.
Суть вопроса:
Есть карта: http:pereselen-kalin.com/map/index.html
Скрипт (построитель он же, обработчик) находится в index.html:

<script>
var defaultAttr = {"fill": "#bdbdbd", "stroke":"#000"};
function onClickBlock(okrug){
var localBlock = okrug;
return function(){
localBlock.animate({fill: "#bdbdbd", stroke:"#ff0000"}, 200);
};
};
function onMouseOverBlock(okrug){
var localBlock = okrug;
return function(){
localBlock.animate({fill: "#686868", stroke: "#ff0000"}, 500);
};
};
function clearBlock(okrug){
var localBlock = okrug;
return function(){
localBlock.animate(defaultAttr, 500);
};
};
window.onload = function (){
var svg = Raphael("svg-canvs",650, 730);
var okrug = new Array();
okrug = [svg.path( d="M190.319,582.501C190..........), (okrug2), (okrug3), (okrug4),....(okrug20)]; *// Массив (1...20) с координатами округов карты

for(i = 0; i < 20; i++)
{
okrug[i].attr(defaultAttr);
okrug[i].node.onmousedown = onClickBlock(okrug[i]);
okrug[i].node.onmouseover = onMouseOverBlock(okrug[i]);
okrug[i].node.onmouseout = clearBlock(okrug[i]);
okrug[i].node.onmouseup = clearBlock(okrug[i]);
}; };
</script>
<div style="position:relative;z-index:0;display:block;float:left;margin:-350px 0 0 0;" id="svg-canvs">
<div style="position:absolute;top:610px;left:65px;width:24%;">
<div class="map-center">
<div class="map-left">
<div class="map-right">
<a href="detalnaya-informaciya1.html">Отчёт по округу №10</a>
</div>
</div>
</div>
</div>
<div style="position:absolute;top:480px;left:65px;width:24%;">
<div class="map-center">
<div class="map-left">
<div class="map-right">
<a href="detalnaya-informaciya2.html">Отчёт по округу №11</a>
</div>
</div>
</div>
</div>
....
.......
........
<div style="position:absolute;top:480px;left:65px;width:24%;">
<div class="map-center">
<div class="map-left">
<div class="map-right">
<a href="detalnaya-informaciya20.html">Отчёт по округу №11</a>
</div>
</div>
</div>
</div>

</div>


Вопрос в следующем:
Сейчас, цвет округов карты меняется при наведении на сами округа. Требуется, чтобы цвет округов менялся при наведении на ссылку "Отчёт по округу №такому-то" соответственно каждому округу. То-есть нужно событие: "onmouseover" в ссылках, привязать к функции: "onMouseOverBlock(okrug)" каждого округа соответственно.

Помогите пожалуйста реализовать сию задачу - правильно.
Если это возможно с обработчиком событий: "onmouseover" в ссылках?
Долго бьюсь и копаю инен на эту тему, но безуспешно smile (в яве я не силён).
Kommentare (0)

Kommentare werden nicht hinzugefügt

Registrieren Sie sich oder melden Sie sich an, um schreiben zu können.
Unternehmen des Tages
Вы также можете добавить свою фирму в каталог IT-фирм, и публиковать статьи, новости, вакансии и другую информацию от имени фирмы.
Подробнее
Mitwirkende
  Flammel
advanced
Absenden