Добрый день.
С js плохо дружу пока, но надо сделать интерактивную карту рф.
Вот что получается:
http://qrmarketing.ru/map
Помогите решить проблему.
При наведении на элемент, внизу должно выводится название соответствующего региона. Сейчас они выводятся названия регионов выводятся невпопад, но при клике выводится то что надо.
Заранее спасибо.
$(function(){
var r = Raphael('map', 1000, 600),
attributes = {
fill: '#ffad41',
stroke: '#c88723',
'stroke-width': 0,
'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: '#c88723'
}, 300);
}, function(){
this.animate({
fill: attributes.fill
}, 300);
document.location.hash = arr[this.id];
$('#desc_block')
.html(paths[arr[this.id]].name)
})
.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('Закрыть'))
.prepend($('<img />').attr('src', 'flags/'+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;
});
}
});
