11550 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,

J'ai un petit soucis avec mon script JQuery. Mon but est de réaliser un changement de contenu avec fadein-fadeout, le tout piloté par des liens a ayant un background-image. Le lien correspondant à la div affichée reste sur hover.

Je suis donc parti de cet article lhttp://www.alsacreations.com/actu/lire/418-jquery-une-bibliothque-javascript-simple-et-efficace.htm.

Voici mon code :


$(function(){
		var current;
		var next;
		var current_id;
		var next_id;
		
		$("div.dynadiv_references").hide();
		current = $("#dyna_idtect");
		current.show();
		current_id = $("#idtect").attr("id");
		$("#idtect").css("background-image","url(images/a_"+current_id+"_hover.gif)");
		

		$("ul#menu_references li a").bind('click',(function() {
		
		
			$("#"+current_id).css("background-image","url(images/a_"+current_id+".gif)");
			
			$("#"+current_id).bind('mouseover',(function() {
						$(this).css("background-image","url(images/a_"+$(this).attr("id")+"_hover.gif)");}));
			
			$("#"+current_id).bind('mouseout',(function() {
						$(this).css("background-image","url(images/a_"+$(this).attr("id")+".gif)");}));
			
			next_id = $(this).attr("id");
			current_id = next_id;
			$(this).css("background-image","url(images/a_"+current_id+"_hover.gif)");
			next = $("div"+$(this).attr("href"));
			current.fadeOut(150, function() {
			current = next;
			current.fadeIn(150);
			
			});
	 	return false;
		;}));
	});


Le soucis est que dès que je "bind" un élément, Jquery me retire son comportement hover (l'image ":hover" n'apparait plus quand on passe sur ce lien).

J'ai donc essayé de rajouter le comportement "à la main", mais le résultat n'est pas satisfaisant car un lien déjà visité ne peut plus rester en comportement hover si on retourne sur celui-ci.

Quelqu'un verrait-il une solution ? (ou la grosse erreur de ma part)

Merci d'avance Smiley lol