Mise en forme de l'image après le survol de la souris

Bonsoir,

Voici mon menu avec des images (avant le survol de la souris):




[i]Voici mon menu avec des images (pendant le survol de la souris):




Voici mon menu avec des images (après le survol de la souris):





Le problème est que l'image (tout à droite) est blanche après le survol de la souris.

Voici le code css:

#imgMenu{ 
position:relative; 
top:45%;  
text-shadow:0 1px 0 #eee;
text-align: left;
margin:auto; 
display:inline-block; /* ff3 , opera , etc ...  voir CC pour IE */ 
margin-top: 84px;
}

#imgMenu li{
float:left;
margin-right: 20px;
position:relative;
background:#E8E8F9;
border: 1px dashed #ffc0ff;
overflow:hidden;
list-style:none;
}

#imgMenu a {
text-decoration: none;
outline: none;
color:#d00000;
display: block;
width: 24px;
padding: 10px;
height: 300px;
cursor:pointer;
}

Voici le code javascript:

jQuery.preloadImages = function()
{
	for(var i = 0; i<arguments.length; i++)
	jQuery("<img>").attr("src", arguments[i]);
}
jQuery.preloadImages("../images/type_bijoux/bague.png", "../images/type_bijoux/bracelet.png", "../images/type_bijoux/chapelet.png", "../images/type_bijoux/collier.png", "../images/type_bijoux/manchette.png");

jQuery(document).ready(function(){
	
	$("#imgMenu li a").hover(
		function(){
			var iconName = $(this).children("img").attr("src");
			var origen = iconName.split(".png")[0];
			$(this).children("img").attr({src: "" + origen + ".png"});
			$(this).css("cursor", "pointer");
			$(this).animate({ width: "225px" }, {queue:false, duration:"normal"} );
			$(this).children("span").animate({opacity: "show"}, "fast");
		}, 
		function(){
			var iconName = $(this).children("img").attr("src");
			var origen = iconName.split()[0];			
			$(this).children("img").attr({src: "" + origen + ".png"});
			$(this).animate({ width: "24px" }, {queue:false, duration:"normal"} );
			$(this).children("span").animate({opacity: "hide"}, "fast");
		
		});
});

Voici mon php:[/i]

$contenu .= '<div id="menu_type">';
$contenu .= '<ul id="imgMenu">';
$contenu .= '<li><a href="#"><img src="images/type_bijoux/bracelet1.png" alt="" /></a></li>';
$contenu .= '<li><a href="#"><img src="images/type_bijoux/chapelet1.png" alt="" /></a></li>';
$contenu .= '<li><a href="#"><img src="images/type_bijoux/collier1.png" alt="" /></a></li>';
$contenu .= '<li><a href="#"><img src="images/type_bijoux/manchette1.png" alt="" /></a></li>';
$contenu .= '</ul>';
$contenu .= '</div>';

Merci pour votre aide.[/i]
Modifié par tipi75 (31 Jan 2010 - 20:00)

Je pige pas tout ce que tu fais en jQuery.

children(span), tu as aucun span dans le code que tu nous as donné.

Je comprend pas pourquoi tu prends la source de l'image pour ré-attribuer la même source en jQuery.

Bref, je crois que tu as du code inutile, en premier lieu. Ensuite tu peux certainement animer que la largeur de ton lien et ajouter un overflow:hidden en CSS comme ça l'image, malgré sa dimension, restera caché si le lien qui contient l'image est plus petit en largeur que l'image elle-même.

Si tu as un URL de ça, je pourrai faire des tests jQuery avec firebug et avec ton exemple.

effectivement les deux lignes avec span me sont inutiles. Je ne sais pas si tu as compris mon problème?

Merci de ton aide

Comme je te disais, si tu as un URL, ça serait intéressant pour tester.

À première vue, j'ai plus le sentiment que c'est un soucis avec tes attributions de "source" dynamique. Peux-tu vérifier si la source de l'image "blanche" existe ? En gros, est-ce l'animation qui cause un problème dans le positionnement de l'image dans le <div> ou c'est simplement parce que la source de ton image n'est plus correct avec les commandes jQuery que tu effectues.