Faire apparaitre une image en survolant un texte

voici mon code mais l'image n'apparait pas, quelqu'un peut il m'aider.

dans le html

<div id="references_logo"><h2>références</h2></div>
<ul id="references">
<li><strong>Les compagnons du devoir,</strong><img src="images/les-compagnons.png"/></li>
<li><strong>Calaos films,</strong><img src="images/CALAO.png" /></li>
<li><strong>Gamm vert,</strong><img src="images/gammvert.png" /></li>
<li><strong>Marc jacobs,</strong><img src="images/marc-jacobs.png" /></li>
<li><strong>Nrj12,</strong><img src="images/NRJ12.png" /></li>
<li><strong>Auchantokabé,</strong><img src="images/Auchan_Okabe.png" /></li>
<li><strong>Ubisoft,</strong><img src="images/ubisoft.png" /></li>
<li><strong>Sanofi aventis,</strong><img src="images/sanofi-aventis.png" /></li>
<li><strong>Astrazeneka,</strong><img src="images/AZ-Cardio.png" /></li>
<li><strong>Barclays,</strong><img src="images/Barclays.png" /></li>
<li><strong>Publicis healthcare,</strong><img src="images/publicis-healthcare.png" /></li>
<li><strong>Roche,</strong><img src="images/Roche_quality.png" /></li>
<li><strong>Laylane,</strong><img src="images/layline.png" /></li>
<li><strong>Galderma,</strong><img src="images/galderma.png" /></li>
<li><strong>Invivo,</strong><img src="images/Invivo.png" /></li>
<li><strong>Calvin klein,</strong><img src="images/CK.png" /></li>
<li><strong>Universal,</strong><img src="images/universal.png" />/li>
</ul>

en css

/* references */

#references_logo {
	width: 983px;
	margin-left: 480px;
	margin-top: 100px;
	text-transform: uppercase;
	color: #004494;
}
#references_logo {
	height: 100px; /* à modifier avec la hauteur du plus grand des logos */
	background: transparent none scroll no-repeat center center;
	overflow: hidden;
}

#references {
	margin: 0 30px;
}

#references li {
	float: left;
	margin-right: 10px;
	color: #6D6868;
}

#references li:hover {
	color: #004494;
}

#references li strong {
	text-transform: uppercase;
}

#references li img {
	display: none;
}

le javascript

$(document).ready(function(){
	
	$("#references li").hover(function(){
		var chemin = $(this).find("img").attr("src");
		$("#references_logo").css("background-image", "chemin"); /* si ça ne fonctionne pas, essayer : "../"+chemin */
	}, function(){
		$("#references_logo").css("background-image", "none");
	});
	
});

vos réponses me seront d'une grande aide
merci par avance
Modifié par sanducmoi (30 Dec 2011 - 15:48)

Bonjour aussi...


En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que le lien "Aide" qui apparaît tout en haut du forum est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation

j'y veillerai à l'avenir, c'est le premier message que je pose
bonne continuation