Swap d'images sur onclick pour modification de langue

Version imprimable

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:

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>

16/02/2011, 19h15
NoSmoking

Bonjour,
un simple

Code:

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

plein d'exemple partout...

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

Code:

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>

Code:

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>

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:

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

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

Code:

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>

17/02/2011, 00h17
ABCIWEB

Faut faire attention, tu ne respecte pas la syntaxe !

Ce n'est pas

Code:

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

mais

Code:

onclick="Change_image(this,'http://free0.hiboox.com/images/0711/e8debc11d15a35594f299fae2c5b01cc.jpg')"
17/02/2011, 01h15
qwertz1

j'ai apporté la correction mais ça ne fonctionne toujours pas.
17/02/2011, 23h03
NoSmoking

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.

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:

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" />   <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>

à 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:

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"];

18/02/2011, 15h42
qwertz1

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?
18/02/2011, 16h17
NoSmoking

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:

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

si je suis en français et

Code:

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

si je suis en allemand
18/02/2011, 17h22
qwertz1

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.

Salut,

Essaie ceci...

Code:

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>

19/02/2011, 11h10
qwertz1

UN TRES GRAND MERCI A TOI.

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