Bonjour. J'ai un problème, mon javascript censé changé une image quand on la survol avec la souris ne fonctionne pas. Il ne fait rien du tout

Voici mon xhtml et Javascript :

<a href="./voir_idee.php?id=<?php echo intval($donnees['id']); ?>"><div class="nb_commentaires" OnMouseOver="javascript:this.style ='background-image: url(/theme/img/comment-hover.jpg)';" OnMouseOut="javascript:this.style ='background-image: url(/theme/img/comment.jpg)';">3</div></a>

Mon CSS :

.nb_commentaires {
	font-size: 1.0em;
	background-image: url(img/comment.jpg);
	width: 100px;
	height: 70px;
	text-align:center;
	margin:10px;
}

Et le style.css se trouve dans le dossier theme.
Le CSS fonctionne bien mais le Javascript ne modifie pas du tout l'image.

Merci

Essaye peut-être ceci :

<a href="./voir_idee.php?id=<?php echo intval($donnees['id']); ?>"><div class="nb_commentaires" onmouseover="this.style.backgroundImage = 'url(/theme/img/comment-hover.jpg)';" onmouseout="this.style.backgroundImage = 'url(/theme/img/comment.jpg)';">3</div></a>

Pourquoi pas tout simplement en CSS ?

Voila c'est comme l'a dit mcc

Mais surtout:

</span></span>

Edit: Gwen, l'action de :hover sur un div est très variable

J'ai essayé mais ca marche pas non plus. Ni avec this.style.background-image.

J'ai aussi essayé avec CSS comme ceci :

.nb_commentaires {
	font-size: 1.0em;
	background-image: url(img/comment.jpg);
	width: 100px;
	height: 70px;
	text-align:center;
	margin:10px;
}
.nb_commentaires-hover {
	font-size: 1.0em;
	background-image: url(img/comment-hover.jpg);
	width: 100px;
	height: 70px;
	text-align:center;
	margin:10px;
}

<div class="nb_commentaires" onmouseover="this.class = 'nb_commentaires-hover';" onmouseout="this.class = 'nb_commentaires';">3</div>

Marche pas non plus

className et non class...

Edit: C'est bon, il est déjà sorti =o

Ca marche, merci