Swap d'images sur onclick pour modification de langue

**qwertz1** · 16/02/2011, 16h02

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, 20h15

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, 22h25

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, 22h32

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, 22h35

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, 01h03

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, 01h17

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, 02h15

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

**NoSmoking** · 18/02/2011, 00h03

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, 11h27

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, 15h22

à 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, 16h42

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, 17h17

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, 18h22

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, 02h26

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, 12h10

UN TRES GRAND MERCI A TOI.

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

Swap d'images sur onclick pour modification de langue

JavaScript

Discussions similaires

Partager

Partager