Показать сообщение отдельно
  #1 (permalink)  
Старый 26.05.2014, 11:56
Новичок на форуме
Отправить личное сообщение для Lexs Посмотреть профиль Найти все сообщения от Lexs
 
Регистрация: 26.05.2014
Сообщений: 2

Не коректно работает .hover в скрипте для SVG карты
Имеется карта 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;
		});
		
		
		 
		
	}
		
			
});


Прошу объяснить решение данной проблемы более подробно, так как в скриптах не разбираюсь.
Ответить с цитированием