Имеется карта SVG при наведении курсора на область ее цвет изменяется. На первый взгляд все работает, но после того как курсор убран с области скрипт возвращает значение прописанное в последнем "color", а должен брать значение конкретной области. Также скрипт использует только значение последнего "color_hover". Получается наведя на область №1 она становится синего цвета а должна быть красная, после того как курсор убран с области ее цвет становится черным, а должен быть белым.
Есть код такого вида:
var paths = {
Ob: {
color: '#ffffff',
color_hover: '#ff0000',
name: '<b>Область №1.</b>',
path: 'M 203,209 L 204,206 L 209,201 L 217,201 L 220,196 L...'
}
Obl: {
color: '#000000',
color_hover: '#001EFF',
name: '<b>Область №2.</b>',
path: 'M 203,209 L 204,206 L 209,201 L 217,201 L 220,196 L...'
}
}
И такой скрипт:
$(function(){
var r = Raphael('map', 1080, 600),
attributes = {
stroke: '#3899E6',
'stroke-width': 0.3,
'stroke-linejoin': 'round'
},
arr = new Array();
for (var country in paths) {
var obj = r.path(paths[country].path);
obj.attr(attributes);
arr[obj.id] = country;
obj
.hover(function(){
this.animate({
fill: paths[country].color_hover
}, 300);
}, function(){
this.animate({
fill: paths[country].color
}, 300);
})
.click(function(){
document.location.hash = arr[this.id];
var point = this.getBBox(0);
$('#map').next('.point').remove();
$('#map').after($('<div />').addClass('point'));
$('.point')
.html(paths[arr[this.id]].name)
.prepend($('<a />').attr('href', '#').addClass('close').text('Close'))
.prepend($('<img />').attr('src', 'emblem/'+arr[this.id]+'.png'))
.css({
left: point.x+(point.width/2)-80,
top: point.y+(point.height/2)-20
})
.fadeIn();
});
$('.point').find('.close').live('click', function(){
var t = $(this),
parent = t.parent('.point');
parent.fadeOut(function(){
parent.remove();
});
return false;
});
}
});
Прошу объяснить решение данной проблемы более подробно, так как в скриптах не разбираюсь.
