Précédent   Forum des professionnels en informatique > Webmasters - Développement Web > JavaScript
JavaScript Forum programmation JavaScript. Lire : Cours JavaScript, FAQ JavaScript, Toutes les FAQ JavaScript et Sources JavaScript
Partagez cette discussion sur d'autres réseaux sociaux : Viadeo Twitter Google Facebook Digg Delicious MySpace Yahoo
Réponse Proposer ce sujet en actualité
 
Outils de la discussion
Publicité
'
Vieux 21/04/2011, 17h12   #1
Nouveau Membre du Club
 
Homme Charles
Étudiant
Inscription : juin 2010
Messages : 54
Détails du profil
Informations personnelles :
Nom : Homme Charles
Âge : 21
Localisation : France

Informations professionnelles :
Activité : Étudiant

Informations forums :
Inscription : juin 2010
Messages : 54
Points : 28
Points : 28
Par défaut 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
charles888 est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 21/04/2011, 17h16   #2
Rédacteur/Modérateur
 
Avatar de SpaceFrog
 
Homme
Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur
Inscription : mars 2002
Messages : 30 009
Détails du profil
Informations personnelles :
Sexe : Homme
Localisation : Royaume-Uni

Informations professionnelles :
Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur
Secteur : Industrie

Informations forums :
Inscription : mars 2002
Messages : 30 009
Points : 45 094
Points : 45 094
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 ?????
__________________
Ma page Developpez
Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
Votre post est résolu ? Alors n'oubliez pas le Tag


réalisations :www.planet-languages.com|www.saftair.com| www.ouestisol.fr | www.sebemex.fr | www.extramiante.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
SpaceFrog est actuellement connecté   Envoyer un message privé Réponse avec citation 00
Vieux 21/04/2011, 17h23   #3
Membre chevronné
 
Homme Krusty
Inscription : mai 2009
Messages : 472
Détails du profil
Informations personnelles :
Nom : Homme Krusty
Localisation : France

Informations forums :
Inscription : mai 2009
Messages : 472
Points : 617
Points : 617
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;
}
__________________
programmer n'est pas connaitre tous les moindres détails d'un langage mais savoir exploiter sous toutes ses facettes ce que l'on connait.
mekal est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 21/04/2011, 17h31   #4
Nouveau Membre du Club
 
Homme Charles
Étudiant
Inscription : juin 2010
Messages : 54
Détails du profil
Informations personnelles :
Nom : Homme Charles
Âge : 21
Localisation : France

Informations professionnelles :
Activité : Étudiant

Informations forums :
Inscription : juin 2010
Messages : 54
Points : 28
Points : 28
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
charles888 est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 21/04/2011, 19h36   #5
Rédacteur/Modérateur
 
Avatar de SpaceFrog
 
Homme
Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur
Inscription : mars 2002
Messages : 30 009
Détails du profil
Informations personnelles :
Sexe : Homme
Localisation : Royaume-Uni

Informations professionnelles :
Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur
Secteur : Industrie

Informations forums :
Inscription : mars 2002
Messages : 30 009
Points : 45 094
Points : 45 094
pour info si tu veux garder la "petite main" sur tes images rajoutes leur un style
__________________
Ma page Developpez
Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
Votre post est résolu ? Alors n'oubliez pas le Tag


réalisations :www.planet-languages.com|www.saftair.com| www.ouestisol.fr | www.sebemex.fr | www.extramiante.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
SpaceFrog est actuellement connecté   Envoyer un message privé Réponse avec citation 00
Réponse Proposer ce sujet en actualité Cette discussion est résolue.
Outils de la discussion



Fuseau horaire GMT +2. Il est actuellement 12h29.


 
 
 
 
Partenaires

Hébergement Web