Swap d'images sur onclick pour modification de langue

**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.

Swap d'images sur onclick pour modification de langue

JavaScript

Vue hybride

Discussions similaires

Partager

Partager