Discussion :

[charles888]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[SpaceFrog]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

[Invité]

et pour simplifier le code utilise this.src

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
function fnClick(lui){
	var dossier = "img/";
	document.getElementById("img_centre").src =lui.src;
}

[charles888]

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

Merci beaucoup d'avoir répondu aussi vite

[SpaceFrog]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 cursor:pointer