Уважаемые форумчане, помогите вывести нумерацию участков на генплане http://iskoski.ru/village/turgenevo/masterplan Реализовано на raphael.js,
для меня это неразрешимая проблема. Собрал всю конструкцию по мануалам и урокам, а самому дописать не хватает опыта.
Здесь код отвечающий за вывод
| Код |
var colors = {"1":"#1A450A","2":"#B4140C","3":"#ffae00","4":"#2679D5"};
var colors_hover = {"1":"#3DA316","2":"#B4140C","3":"#F1F801","4":"#9AC1ED"};
$(function(){
var r = Raphael('mapt', 800, 445),
attributes = {
fill: '#808080',
opacity: 0.9,
transform: ("s1"),
stroke: '#000000',
'stroke-width': 0,
'stroke-linejoin': 'round'
},
arr = new Array();
objs = new Array();
for (var country in paths) {
var obj = r.path(paths[country].path);
obj.attr(attributes);
if(states[country])
obj.attr('fill',colors[states[country]]);
objs[country] = obj;
arr[obj.id] = country;
obj
.hover(function(){
if(states[paths[arr[this.id]].name])
fill = colors_hover[states[paths[arr[this.id]].name]];
else
fill = '#C0C0C0';
this.animate({
stroke: '#000000',
'stroke-width': 0,
'stroke-linejoin': 'round',
fill: fill,
opacity: 0.4,
transform: ("s1")
}, 300);
$('div#regions').scrollTo( 'li#reg' + paths[arr[this.id]].name, 100 );
$('li#reg' + paths[arr[this.id]].name).addClass('active');
document.location.hash = arr[this.id];
$('.point')
.html(paths.name);
}, function(){
if(states[paths[arr[this.id]].name])
fill = colors[states[paths[arr[this.id]].name]];
else
fill = attributes.fill;
this.animate({
opacity: 0.9,
stroke: '#000000',
'stroke-width': 0,
'stroke-linejoin': 'round',
fill: fill,
transform: ("s1")
}, 700);
$('li#reg' + paths[arr[this.id]].name).removeClass('active');
})
/*! .click(function(){
document.location.hash = arr[this.id];
var point = this.getBBox(0);
$('#mapt').next('.point').remove();
$('#mapt').after($('<div />').addClass('point'));
$('.point')
.html(paths[arr[this.id]].name)
.prepend($('<a />').attr('href', '#').addClass('close').text('Close'))
.prepend($('<img />').attr('src', '/netcat_files/flags/'+arr[this.id]+'.png'))
.css({
left: point.x+(point.width/2)-20,
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;
});
*/
$('div#regions ul li').unbind('mouseenter mouseleave');
$('div#regions ul li').hover(function(){
reg_id = $(this).attr('id').substr(3);
$('li#reg' + reg_id).addClass('active');
var obj = objs[reg_id];
if(states[reg_id])
fill = colors_hover[states[reg_id]];
else
fill = '#C0C0C0';
obj.animate({
stroke: '#000000',
'stroke-width': 0,
'stroke-linejoin': 'round',
fill: fill,
opacity: 0.4,
scale: 1
}, 300).toFront();
}, function(){
reg_id = $(this).attr('id').substr(3);
$('li#reg' + reg_id).removeClass('active');
var obj = objs[reg_id];
var fill = '';
if(states[reg_id])
fill = colors[states[reg_id]];
else
fill = attributes.fill;
obj.animate({
opacity: 0.9,
scale: 1,
stroke: '#000000',
'stroke-width': 0,
'stroke-linejoin': 'round',
fill: fill
}, 300);
})
}
});
|
здесь координаты участков
| Код |
var states = Array();
var paths = {
1: {
name: '1',
path: 'M 449.344,365.086 511.449,351.17 512.136,353.818 506.061,371.494 460.448,381.952 z'
},
2: {
name: '2',
path: 'M 430.821,334.743 459.939,328.32 479.088,356.795 448.332,363.49 z'
},
3: {
name: '3',
path: 'M 461.781,327.904 482.852,323.169 505.084,331.591 510.967,349.465 481.014,356.364 z'
},
4: {
name: '4',
path: 'M 476.423,287.836 526.403,289.897 529.908,304.812 479.29,302.551 z'
},
5: {
name: '5',
path: 'M 471.123,264.751 489.271,243.078 496.966,237.743 504.918,246.122 517.684,269.828 471.736,268.027 z'
},
6: {
name: '6',
path: 'M 546.01,186.539 569.035,186.682 593.084,186.778 576.273,208.447 554.427,208.267 z'
}
}
|
Буду рад помощи и с благодарностью приму любые предложения |