Swap d'images sur onclick pour modification de langue [Résolu]

qwertz1 · 16/02/2011, 15h02

Salut à tous,

j'ai un petit problème. Actuellement lorsque je clic sur un des drapeaux afin de pouvoir modifier la langue, seul le texte placé sous les 2 drapeaux changent.

Je voulais savoir s'il est possible de faire en sorte que lorsque je clic sur l'un de ces 2 drapeaux, que les petites images soient respectivement changé par les images:

- http://data.imagup.com/4/1112527798.jpg) pour la 1ere image
- http://data.imagup.com/4/1112527798.jpg) pour la 2eme image

En gros, je voudrais que le contenu des images 1 et 2 (rose et vert) puisse se modifier automatiquement selon le choix de la langue choisi.

Merci d'avance pour vos réponse.

code:

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<style type="text/css">
#A {
	width: 780px;
	margin-right: auto;
	margin-left: auto;
	line-height: 13px;
}
#B {
	text-align: center;
	width: 780px;
	font-family: "Lucida Grande";
	line-height: 16px;
}
#C {
	width: 780px;
	text-align: center;
}
#D {
	height: 400px;
	width: 700px;
	float: left;
	background-image: url(<a href="http://data.imagup.com/5/1112518499.jpg);" target="_blank">http://data.imagup.com/5/1112518499.jpg);</a>
}
#E {
	float: left;
	width: 80px;
	text-align: right;
}
#F {
	float: left;
	width: 80px;
	text-align: right;
}
#G {
	float: left;
	width: 80px;
	text-align: right;
}
#E1 img {
	cursor:pointer;
}
</style>
<script language="javascript">
function remplace(image) {
document.getElementById("D").innerHTML="<img src='"+image+"'>";
}
</script>
<script language="javascript">  
function affiche_text(id) {   
 
    if (id == "A"){  
        var text1 = "F";  
     }  
 
    else{  
        var text1 = "D";  
    }  
    document.getElementById("C").innerHTML = text1;
	}  
</script>
</head>
 
<body>
<div id="A">
  <div id="B">
  <img src="http://data.imagup.com/2/1105182592.png" onclick="affiche_text('A');" width="41" height="12" />&nbsp;&nbsp;
  <img src="http://data.imagup.com/3/1105182610.png" onclick="affiche_text('');" width="42" height="12" /></div>
  <div id="C">F</div>
  <div id="D"></div>
  <div id="E"><img
src="http://data.imagup.com/5/1112518499.jpg"
onclick="remplace('http://data.imagup.com/5/1112518499.jpg');"
height="40" width="70"><br>
<br></div>
  <div id="F">
<img src="http://data.imagup.com/4/1112527767.jpg"
onclick="remplace('http://data.imagup.com/4/1112527767.jpg');"
height="40" width="70"><br>
<br></div>
<div id="G">
<img src="http://data.imagup.com/5/1112518598.jpg"
onclick="remplace('http://data.imagup.com/5/1112518598.jpg');"
height="40" width="70"><br>
  </div>
</div>
</body>
</html>

NoSmoking · 16/02/2011, 19h15

Bonjour,
un simple

Code :

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

<img src="http://data.imagup.com/4/1112527767.jpg" onclick = "this.src = 'nom_nouvelle_image';"

plein d'exemple partout...

qwertz1 · 16/02/2011, 21h25

Merci pour la réponse, mais j'ai mis le code de la manière suivant mais ça ne fonctionne pas.

Code html :

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

1
2
3
4
5
6
7
8
9
10
<div id="E"><img
src="http://free0.hiboox.com/images/0711/bef02789dcb571c3631761858327c606.jpg"
onclick="this.src('http://free0.hiboox.com/images/0711/e8debc11d15a35594f299fae2c5b01cc.jpg');"
height="40" width="70"><br>
<br></div>
  <div id="F">
<img src="http://free0.hiboox.com/images/0711/bef02789dcb571c3631761858327c606.jpg"
onclick="this.src('http://free0.hiboox.com/images/0711/e8debc11d15a35594f299fae2c5b01cc.jpg');"
height="40" width="70"><br>
<br></div>

andry.aime · 16/02/2011, 21h32

Code html :

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

1
2
3
4
5
6
7
8
9
10
<div id="E"><img
src="http://free0.hiboox.com/images/0711/bef02789dcb571c3631761858327c606.jpg"
onclick="this.src='http://free0.hiboox.com/images/0711/e8debc11d15a35594f299fae2c5b01cc.jpg';"
height="40" width="70"><br>
<br></div>
<div id="F">
<img src="http://free0.hiboox.com/images/0711/bef02789dcb571c3631761858327c606.jpg"
onclick="this.src='http://free0.hiboox.com/images/0711/e8debc11d15a35594f299fae2c5b01cc.jpg';"
height="40" width="70"><br>
<br></div>

ABCIWEB · 16/02/2011, 21h35

Les bonnes balises pour javascript sont <script type="text/javascript">

Si tu veux externaliser la fonction donnée par NoSmoking il te suffit de faire :

Code :

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

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
<!--
function Change_image(img,new_img)
{
img.src = new_img;
}
-->
</script>
...
<img src="images1.jpg" onclick = "Change_image(this,'images2.jpg')"  />

qwertz1 · 17/02/2011, 00h03

Ok merci. c'est ce que j'ai fait mais ça ne fonctionne pas!

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
 
<style type="text/css">
#A {
	width: 780px;
	margin-right: auto;
	margin-left: auto;
	line-height: 13px;
}
#B {
	text-align: center;
	width: 780px;
	font-family: "Lucida Grande";
	line-height: 16px;
}
#C {
	width: 780px;
	text-align: center;
}
#D {
	height: 400px;
	width: 700px;
	float: left;
	background-image: url(<a href="http://free0.hiboox.com/images/0711/bef02789dcb571c3631761858327c606.jpg);" target="_blank">http://free0.hiboox.com/images/0711/...8327c606.jpg);</a>
}
#E {
	float: left;
	width: 80px;
	text-align: right;
}
#F {
	float: left;
	width: 80px;
	text-align: right;
}
#G {
	float: left;
	width: 80px;
	text-align: right;
}
#E1 img {
	cursor:pointer;
}
</style>
<script language="javascript">
function remplace(image) {
document.getElementById("D").innerHTML="<img src='"+image+"'>";
}
</script>
<script language="javascript">  
function affiche_text(id) {   
 
    if (id == "A"){  
        var text1 = "F";  
     }  
 
    else{  
        var text1 = "D";  
    }  
    document.getElementById("C").innerHTML = text1;
	}  
</script>
<script type="text/javascript">
function Change_image(img,new_img) {
img.src = new_img;
}
</script>	
</head>
 
<body>
<div id="A">
  <div id="B">
  <img src="http://free0.hiboox.com/images/0711/e8debc11d15a35594f299fae2c5b01cc.jpg" onclick="affiche_text('A');" width="41" height="12" />&nbsp;&nbsp;
  <img src="http://free0.hiboox.com/images/0711/e8debc11d15a35594f299fae2c5b01cc.jpg" onclick="affiche_text('');" width="42" height="12" /></div>
  <div id="C">F</div>
  <div id="D"></div>
  <div id="E"><img
src="http://free0.hiboox.com/images/0711/bef02789dcb571c3631761858327c606.jpg"
onclick="Change_image(this,'http://free0.hiboox.com/images/0711/e8debc11d15a35594f299fae2c5b01cc.jpg';"
height="40" width="70"><br>
<br></div>
<div id="F">
<img src="http://free0.hiboox.com/images/0711/bef02789dcb571c3631761858327c606.jpg"
onclick="Change_image(this,'http://free0.hiboox.com/images/0711/e8debc11d15a35594f299fae2c5b01cc.jpg';"
height="40" width="70"><br>
<br></div>
</div>
</body>
</html>

ABCIWEB · 17/02/2011, 00h17

Faut faire attention, tu ne respecte pas la syntaxe !

Ce n'est pas

Code :

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

onclick="Change_image(this,'http://free0.hiboox.com/images/0711/e8debc11d15a35594f299fae2c5b01cc.jpg';"

mais

Code :

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

onclick="Change_image(this,'http://free0.hiboox.com/images/0711/e8debc11d15a35594f299fae2c5b01cc.jpg')"

qwertz1 · 17/02/2011, 01h15

j'ai apporté la correction mais ça ne fonctionne toujours pas.

NoSmoking · 17/02/2011, 23h03

Citation:

Envoyé par qwertz1

Personne capable de m'apporter son aide s.v.p

je viens de tester ton premier code sur les différents navigateurs que j'ai et tout fonctionne correctement, ou du moins semble.

Pourrais tu redéfinir ce qui ne marche pas.

qwertz1 · 18/02/2011, 10h27

Oui ça fonctionne mais c'est le résultat que je souhaite obtenir qui ne fonctionne pas. Je me suis peut-être mal exprimé donc je vais reprendre:

Actuellement la gallérie d'image fonctionne parfaitement bien. (c'est à dire que lorsque je clic sur une des petites images celles-ci s'affichent correctement dans la zone de la grande image)
Mais le problème est au niveau de la fonction de changement de langue sur les 2 drapeaux. (actuellement seul le texte sous les drapeaux changes) alors que je voudrais faire des changements aussi sur les images)

Actuellement, par défaut la langue d'origine du contenu est en français (mes 2 petites images ont du texte en français)

Je souhaiterais que lorsque je clic sur LE DRAPEAU ALLEMAND, que les 2 petites images soit IMMÉDIATEMENT remplacé par les images ci-dessous et que par la même occasion la nouvelle 1ere image soit aussi IMMÉDIATEMENT affiché dans la zone de la grande image:

- http://data.imagup.com/4/1112527798.jpg) pour la 1ere image
- http://data.imagup.com/5/1112688640.jpg) pour la 2eme image

(ce sont les mêmes images mais avec du contenu en allemand)

Et pour finir que le schéma inverse fonctionne aussi. C'est à dire que si j'ai cliqué sur LE DRAPEAU ALLEMAND et que je clic par la suite sur le LE DRAPEAU FRANÇAIS que le contenu puisse revenir à celui d'origine.

Voila j'espère avoir été le plus claire possible.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<style type="text/css">
#A {
	width: 780px;
	margin-right: auto;
	margin-left: auto;
	line-height: 13px;
}
#B {
	text-align: center;
	width: 780px;
	font-family: "Lucida Grande";
	line-height: 16px;
}
#C {
	width: 780px;
	text-align: center;
}
#D {
	height: 400px;
	width: 700px;
	float: left;
	background-image: url(http://data.imagup.com/5/1112518499.jpg);
}
#E {
	float: left;
	width: 80px;
	text-align: right;
}
#F {
	float: left;
	width: 80px;
	text-align: right;
}
#G {
	float: left;
	width: 80px;
	text-align: right;
}
#E1 img {
	cursor:pointer;
}
</style>
<script language="javascript">
function remplace(image) {
document.getElementById("D").innerHTML="<img src='"+image+"'>";
}
</script>
<script language="javascript">  
function affiche_text(id) {   
 
    if (id == "A"){  
        var text1 = "F";  
     }  
 
    else{  
        var text1 = "D";  
    }  
    document.getElementById("C").innerHTML = text1;
	}  
</script>
</head>
 
<body>
<div id="A">
  <div id="B">
  <img src="http://data.imagup.com/2/1105182592.png" onclick="affiche_text('A');" width="41" height="12" />&nbsp;&nbsp;
  <img src="http://data.imagup.com/3/1105182610.png" onclick="affiche_text('');" width="42" height="12" /></div>
  <div id="C">F</div>
  <div id="D"></div>
  <div id="E"><img
src="http://data.imagup.com/5/1112518499.jpg"
onclick="remplace('http://data.imagup.com/5/1112518499.jpg');"
height="40" width="70"><br>
<br></div>
  <div id="F">
<img src="http://data.imagup.com/4/1112527767.jpg"
onclick="remplace('http://data.imagup.com/4/1112527767.jpg');"
height="40" width="70"><br>
<br></div>
<div id="G">
<img src="http://data.imagup.com/5/1112518598.jpg"
onclick="remplace('http://data.imagup.com/5/1112518598.jpg');"
height="40" width="70"><br>
  </div>
</div>
</body>
</html>

NoSmoking · 18/02/2011, 14h22

à priori il te faudrait gérer deux tableau d'images, un pour chaque langue, et selon la langue tu affiches l'un ou l'autre.

Il te faudrait à minima ceci

Code :

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

1
2
3
4
var tImg = [];
var langue = "francais";
tImg["francais"] = [ "image_fr_1.jpg", "image_fr_2.jpg", "image_fr_3.jpg"];
tImg["allemand"] = [ "image_de_1.jpg", "image_de_2.jpg", "image_de_3.jpg"];

qwertz1 · 18/02/2011, 15h42

Ok merci pour les info, mais je voudrais si possible essayer de comprendre ton code.

Sachant que je voudrais que seul les 2 première images soient changé, pourquoi dans ton code y a il un lien pour 3 images (3 français et 3 allemand?

Est-ce que je dois simplement placer correctement ton code ou ce dernier viendra-il en remplacement de mon code précédant?

Y a il un lien qui pourrait m'expliquer comment écrire et placer ce genre de code de manière correct?

NoSmoking · 18/02/2011, 16h17

je ne t'ai pas fourni de code mais une structure à utiliser

Si je veux afficher l'image 2, index 1 dans le tableau tImg, alors j'affiche l'image

Code :

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

tImg['francais'][1]; // soit "image_fr_2.jpg"

si je suis en français et

Code :

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

tImg['allemand'][1]; // soit "image_de_2.jpg"

si je suis en allemand

qwertz1 · 18/02/2011, 17h22

Tout d'abord merci pour ton aide apporté, mais malheureusement je n'y comprend rien (je ne suis que débutant)

Voila ce n'est vraiment pas du à de la flem (j'ai effectué pas mal de recherche), mais malheureusement le webmastering c'est loin d'être mon point fort.

Donc je demande si une personne aurait l'amabilité de bien vouloir m'écrire le code.

Eric2a · 19/02/2011, 01h26

Salut,

Essaie ceci...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">/*<![CDATA[*/
	#A {
		width: 780px;
		margin-right: auto;
		margin-left: auto;
		line-height: 13px;
	}
	#B {
		text-align: center;
		width: 780px;
		font-family: "Lucida Grande";
		line-height: 16px;
	}
	#C {
		width: 780px;
		text-align: center;
	}
	#D {
		height: 400px;
		width: 700px;
		float: left;
		background-image: url(http://data.imagup.com/5/1112518499.jpg);
	}
	#E {
		float: left;
		width: 80px;
		text-align: right;
	}
	#F {
		float: left;
		width: 80px;
		text-align: right;
	}
	#G {
		float: left;
		width: 80px;
		text-align: right;
	}
	#E1 img {
		cursor:pointer;
	}
/*]]>*/
</style>
<script type="text/javascript">//<![CDATA[
	// Variables globales
	var lang='F';
 
	var tImg=[];
	tImg['F']=['http://data.imagup.com/5/1112518499.jpg','http://data.imagup.com/4/1112527767.jpg'];
	tImg['D']=['http://data.imagup.com/4/1112527798.jpg','http://data.imagup.com/5/1112688640.jpg'];
 
	function remplace(tab,i){
		/*	si tab == true alors
				i (de type numérique) correspond à l'index dans le tableau pour la langue sélectionnée
					0=Image rose
					1=Image Verte
			sinon
				i (de type chaine de caractère) correspond à l'URL de l'image 
		 */
		var url=(tab)?tImg[lang][i]:i;
		document.getElementById('D').innerHTML='<img src="'+url+'" />';
	}
 
	function affiche_text(id){
		// Sélection de la langue
		lang=(id=='F')?'F':'D';
 
		// Première image dans le tableau pour la langue sélectionnée (la rose)
		var url=tImg[lang][0];
 
		// Texte
		var text=(lang=='F')?'Français':'Allemand';
		document.getElementById('C').innerHTML=text;
 
		// Petite image #1
		document.getElementById('img1').src=url;
 
		// Petite image #2
		document.getElementById('img2').src=tImg[lang][1];
 
		// Grande Image
		remplace(false,url);
	}
//]]>
</script>
</head>
<body>
<div id="A">
	<div id="B">
		<img src="http://data.imagup.com/2/1105182592.png" onclick="affiche_text('F');" width="41" height="12" />&nbsp;&nbsp;
		<img src="http://data.imagup.com/3/1105182610.png" onclick="affiche_text('D');" width="42" height="12" />
	</div>
	<div id="C">Français</div>
	<div id="D"></div>
 
	<div id="E">
		<img id="img1" src="http://data.imagup.com/5/1112518499.jpg" onclick="remplace(true,0);" height="40" width="70" /><br /><br />
	</div>
	<div id="F">
		<img id="img2" src="http://data.imagup.com/4/1112527767.jpg" onclick="remplace(true,1);" height="40" width="70" /><br /><br />
	</div>
	<div id="G">
		<img src="http://data.imagup.com/5/1112518598.jpg" onclick="remplace(false,this.src);" height="40" width="70" /><br />
	</div>
</div>
</body>
</html>

qwertz1 · 19/02/2011, 11h10

UN TRES GRAND MERCI A TOI.

C'est exactement le résultat que je recherchais.

17/02/2011, 00h17	#7
ABCIWEB Membre Expert Inscription : septembre 2010 Messages : 1 239 Détails du profil Informations forums : Inscription : septembre 2010 Messages : 1 239 Points : 1 561 Points : 1 561	Faut faire attention, tu ne respecte pas la syntaxe ! Ce n'est pas Code : Sélectionner tout - Visualiser dans une fenêtre à part onclick="Change_image(this,'http://free0.hiboox.com/images/0711/e8debc11d15a35594f299fae2c5b01cc.jpg';" mais Code : Sélectionner tout - Visualiser dans une fenêtre à part onclick="Change_image(this,'http://free0.hiboox.com/images/0711/e8debc11d15a35594f299fae2c5b01cc.jpg')" __________________ - Réalisations - Interface graphique : génération en javascript d'objets défilants, texte et/ou images, mode horizontal ou vertical.
	00

16/02/2011, 19h15	#2
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 930 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 930 Points : 4 744 Points : 4 744	Bonjour, un simple Code : Sélectionner tout - Visualiser dans une fenêtre à part <img src="http://data.imagup.com/4/1112527767.jpg" onclick = "this.src = 'nom_nouvelle_image';" plein d'exemple partout...
	00

17/02/2011, 01h15	#8
qwertz1 Invité de passage Inscription : novembre 2010 Messages : 44 Détails du profil Informations forums : Inscription : novembre 2010 Messages : 44 Points : 0 Points : 0	j'ai apporté la correction mais ça ne fonctionne toujours pas.
	00

18/02/2011, 15h42	#12
qwertz1 Invité de passage Inscription : novembre 2010 Messages : 44 Détails du profil Informations forums : Inscription : novembre 2010 Messages : 44 Points : 0 Points : 0	Ok merci pour les info, mais je voudrais si possible essayer de comprendre ton code. Sachant que je voudrais que seul les 2 première images soient changé, pourquoi dans ton code y a il un lien pour 3 images (3 français et 3 allemand? Est-ce que je dois simplement placer correctement ton code ou ce dernier viendra-il en remplacement de mon code précédant? Y a il un lien qui pourrait m'expliquer comment écrire et placer ce genre de code de manière correct?
	00

18/02/2011, 16h17	#13
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 930 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 930 Points : 4 744 Points : 4 744	je ne t'ai pas fourni de code mais une structure à utiliser Si je veux afficher l'image 2, index 1 dans le tableau tImg, alors j'affiche l'image Code : Sélectionner tout - Visualiser dans une fenêtre à part tImg['francais'][1]; // soit "image_fr_2.jpg" si je suis en français et Code : Sélectionner tout - Visualiser dans une fenêtre à part tImg['allemand'][1]; // soit "image_de_2.jpg" si je suis en allemand
	00

18/02/2011, 17h22	#14
qwertz1 Invité de passage Inscription : novembre 2010 Messages : 44 Détails du profil Informations forums : Inscription : novembre 2010 Messages : 44 Points : 0 Points : 0	Tout d'abord merci pour ton aide apporté, mais malheureusement je n'y comprend rien (je ne suis que débutant) Voila ce n'est vraiment pas du à de la flem (j'ai effectué pas mal de recherche), mais malheureusement le webmastering c'est loin d'être mon point fort. Donc je demande si une personne aurait l'amabilité de bien vouloir m'écrire le code.
	00

19/02/2011, 11h10	#16
qwertz1 Invité de passage Inscription : novembre 2010 Messages : 44 Détails du profil Informations forums : Inscription : novembre 2010 Messages : 44 Points : 0 Points : 0	UN TRES GRAND MERCI A TOI. C'est exactement le résultat que je recherchais.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email