Chnager la source d'une image au clique

Bonjour,
J'ai un petit problème concernant un menu !!!
J'ai une div contentLeft qui contient 3 div avec comme class btnTest, je voudrais qu'a chaque clique de l'utilisateur, la source de mon image change pour afficher une flèche vers le bas, jusque là, aucun problème.
Je voudrais cependant que la source de mon image se rétablisse quand l'utilisateur clique sur une autre div :S

Merci d'avance

<div id="contentLeft">
<div id="controller" >
    <span class="jFlowControl"><a href="#">
    <div class="btnTest"><p><img class="flecheDroite" id="siteweb" src="img/fleche_droite.png" width="9" height="10" /><h2>Site Web</h2>
    Réalisations de différents site internet : Webdesign, ergonomie, intégrations et accésibilité web
    </p></div>
    </a>
    </span>
    
    <span class="jFlowControl"><a  href="#">
    <div class="btnTest"><p><img class="flecheDroite" id="prepresse" src="img/fleche_droite.png" width="9" height="10" /><h2>Prépresse</h2>
    Réalisations de différents site internet : Webdesign, ergonomie, intégrations et accésibilité web
    </p></div>
    </a>
    </span>
    
    <span class="jFlowControl"><a  href="#">
    <div class="btnTest"><p><img class="flecheDroite" id="divers" src="img/fleche_droite.png" width="9" height="10" /><h2>Divers</h2>
    Réalisations de différents site internet : Webdesign, ergonomie, intégrations et accésibilité web
    </p></div>
    </a>
    </span>

</div><!-- controller -->
</div><!-- Fin contentLeft -->

.btnTest {
	display: block;
	background-color: #1A2022;
	height: 98px;
	width: 340px;
	float: left;
	margin-top: 15px;
	margin-left: 15px;
	padding-top: 10px;
	padding-left: 20px;
	font-size: 11px;
	line-height: 18px;
}

Modifié par Fz3ro (20 Aug 2010 - 02:10)

Bonjour,

1. Rappel: une image de décoration doit avoir un attribut alt vide: <img alt="">.
(En passant, l'absence d'attribut alt est une erreur de validation en HTML4 et en XHTML1... tu utilises bien régulièrement un validateur?)

2. Les H2 dans des éléments P, c'est juste pas possible (pas valide, source de problèmes dans les navigateurs). Un DIV dans un A dans un SPAN, c'est pas possible non plus. J'en conclus deux choses:
- tu as de grosses lacunes en HTML qu'il faudrait combler;
- tu n'as pas l'habitude de valider ton code HTML, et il va falloir prendre cette habitude (tant que tu ne connais pas ton HTML sur le bout des doigts ).

3. Dans l'absolu, une image de décoration pourra être placée en image de fond en CSS, plutôt que dans le code HTML. Ce serait très pertinent ici.
Tu peux avoir un style pour afficher une première flèche en image de fond, et un deuxième pour la deuxième flèche, chacun correspondant à une classe attribuée aux éléments H2. Ensuite, en JavaScript, tu te contentes de changer la classe du H2, plutôt que de chercher à changer la source d'une image.

Bonne continuation.
Modifié par Florent V. (20 Aug 2010 - 04:21)