changement src image onclick

Bonjour à tous,

J'ai une grande image au centre de ma page et des petites images à gauche, j'aimerais que lorsqu'on click sur une petite image de gauche elle vienne à la place de la grande image.

j'ai ceci :

Code:

---

1 2 3 4 5 6

<center><img style="height:350px;width:350px;"src="img/hotel_1.jpg" id="img_centre" name="img_centre" /></center> <div id="image_gauche"> <a href="" onclick="fnClick('hotel_1');"><img id="hotel_1" name="hotel_1" style="height:110px;width:150px;border:1px solid red;" src="img/hotel_1.jpg" /></a><br/> <a href="" onclick="fnClick('hotel_2');"><img id="hotel_2" name="hotel_2" style="height:110px;width:150px;border:1px solid red;" src="img/hotel_2.jpg" /></a><br/> <a href="" onclick="fnClick('hotel_3');"><img id="hotel_3" name="hotel_3" style="height:110px;width:150px;border:1px solid red;" src="img/hotel_3.jpg" /></a><br/> </div>

---

et ma fonction javascript :

Code:

---

1 2 3 4

function fnClick(id_img){ var dossier = "img/"; document.getElementById("img_centre").src = dossier + id_img +".jpg"; }

---

Je précise que ca me change tout de même l'image pendant 1 fraction de seconde et après cela redevient celle par défaut :/

je développe le site en jsp si ca change quelque chose.

Merci beaucoup de votre aide :)

Arrrrrrrrrrrrrrettttttttttttez de coller des balises a !!!!


le click sur un href enclenche le href
il faut inhiber le rechargement de page avec un return false

Code:

---

<a href="" onclick="fnClick('hotel_1');return false">

---

pourquoi tu ne mets pas le onclick directement sur la balise image ?????

et pour simplifier le code utilise this.src

Code:

---

1 2 3 4 5 6 7

<center><img style="height:350px;width:350px;"src="img/hotel_1.jpg" id="img_centre" name="img_centre" /></center> <div id="image_gauche"> <a onclick="fnClick(this);"><img style="height:110px;width:150px;border:1px solid red;" src="img/hotel_1.jpg" /></a><br/> <a onclick="fnClick(this);"><img style="height:110px;width:150px;border:1px solid red;" src="img/hotel_2.jpg" /></a><br/> <a onclick="fnClick(this);"><img style="height:110px;width:150px;border:1px solid red;" src="img/hotel_3.jpg" /></a><br/> </div>

---

Code:

---

1 2 3 4 5

function fnClick(lui){ var dossier = "img/"; document.getElementById("img_centre").src =lui.src; }

---

J'ai enlevé les balises <a> qui ne servaient a rien effectivement u_u et le code fonctionne :D

Merci beaucoup d'avoir répondu aussi vite :)

pour info si tu veux garder la "petite main" sur tes images rajoutes leur un style

Code:

---

cursor:pointer

---