Получилось создать массив обьектов с тем же id, теми же атрибутами, но событие ховер подвесить не получается( пробовали this.id и...в общем не вышло. Помогите обьединить их obj и hover чтобы менялись вместе.(
$(function(){
var r = Raphael('map', 820, 420),
attributes = {
fill: '#3a75c4',
stroke: '#3b5998',
'stroke-width': 2,
'stroke-linejoin': 'round'
},
attribut = {
fill: '#000',
},
arr = new Array();
for (var country in paths) {
var obj = r.path(paths[country].path);
var t = r.text(paths[country].x, paths[country].y, paths[country].name);
obj.attr(attributes);
t.attr(attribut);
obj.attr('title', paths[country].name);
arr[obj.id] = country;
arr[t.id] = country;
obj
.hover(function(){
this.animate({
fill: '#003399',
}, 300);
}, function(){
this.animate({
fill: attributes.fill,
}, 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]].name2)
.prepend($('<a />').attr('href', '#').addClass('close').text('Закрыть'))
.css({
left: point.x+(point.width/2)-80,
top: point.y+(point.height/2)-20
})
.fadeIn();
});
t
.hover(function(){
this.animate({
fill: '#003399',
}, 300);
}, function(){
this.animate({
fill: attribut.fill,
}, 300);
})
$('.point').find('.close').live('click', function(){
var t = $(this),
parent = t.parent('.point');
parent.fadeOut(function(){
parent.remove();
});
return false;
});
