Swap d'images sur onclick pour modification de langue

**SpaceFrog** · 02/03/2011, 10h55

les class sans la fonction que je t'ai donnée ne servent pas à grand chose ...

il te faut virer les focntions actuelles et les remplacer par celle que je t'ai donnée ...

**qwertz1** · 02/03/2011, 11h18

Ok mais je sais pas ce que je dois exactement effacer et par quoi les remplacer de manière correcte dans le code.

**SpaceFrog** · 02/03/2011, 11h24

efface tout ce qui est entre balises script pour le remplacer par le code que je t'ai donné

**qwertz1** · 02/03/2011, 11h48

OK comme ça?

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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
 
<style type="text/css">
#A {
	width: 780px;
	margin-right: auto;
	margin-left: auto;
}
#B {
	height: 37px;
	width: 780px;
	font-family: "Cronos Pro";
	font-size: 17px;
	line-height: 13px;
	cursor: default
}
#BEs {
	height: 13px;
	width: 780px;
}
#B1 {
	height: 24px;
	width: 6px;
	float: left;
}
#B2 {
	height: 24px;
	width: 774px;
	text-align: left;
	float: left;
}
#Es1 {
	background-color: #FFF;
	height: 1px;
	width: 780px;
}
#C {
	height: 21px;
	width: 780px;
	font-family: "Cronos Pro";
	font-size: 11px;
	line-height: 13px;
}
#CEs {
	height: 4px;
	width: 780px;
}
#C1 {
	height: 17px;
	width: 6px;
	float: left;
}
#lang DE on {
	height: 17px;
	width: 28px;
	float: left;
	text-align: right;
	cursor: pointer
}
#C3 {
	height: 17px;
	width: 6px;
	float: left;
}
#lang FR off {
	height: 17px;
	width: 27px;
	float: left;
	text-align: right;
	cursor: pointer
}
#C5 {
	height: 17px;
	width: 6px;
	float: left;
}
#lang EN off {
	height: 17px;
	width: 28px;
	float: left;
	text-align: right;
	cursor: pointer;
}
#C7 {
	height: 17px;
	width: 50px;
	float: left;
}
#C8 {
	height: 17px;
	width: 70px;
	float: left;
	text-align: right;
	cursor: pointer
}
#C9 {
	height: 17px;
	width: 12px;
	float: left;}
#C10 {
	height: 17px;
	width: 21px;
	float: left;
	text-align: right;
	cursor: pointer
}
#C11 {
	height: 17px;
	width: 6px;
	float: left;
}
#Es2 {
	height: 10px;
	width: 780px;
}
#D {
	height: 400px;
	width: 780px;
}
#D1 {
	float: left;
	height: 400px;
	width: 700px;
	background-image: url(http://data.imagup.com/4/1112527798.jpg);
}
#D2 {
	text-align: right;
	float: left;
	width: 80px;
	cursor: pointer
}
#D3 {
	text-align: right;
	float: left;
	width: 80px;
	cursor: pointer
}
#D4 {
	text-align: right;
	float: left;
	width: 80px;
	cursor: pointer
}
#E {
	height: 21px;
	width: 780px;
}
    #DDE {
        display:none;
    }
    #DFR {
        display:none;
	}
	#DEN {
        display:none;
	}
	.on {display:block;
		}
    .off {display:none;
      }
}
</style>
<script type="text/javascript">
    <script type="text/javascript">
var tabpics=new Array();
tabpics['fr']=new Image()
tabpics['fr'].scr='imagefr.png';
tabpics['gb']=new Image()
tabpics['gb'].scr='imagefr.png';
tabpics['de']=new Image()
tabpics['de'].scr='imagefr.png';
 
 
function swaplang(pays){
//getsion des class lang pays 
var tabElts=document.getElementsByTagName('*')
var i=-1;
tablang=new Array();
while (tabElts[++i]){
if (tabElts[i].className.indexOf('lang')>-1){tablang.push(tabElts[i]);}
}
i=-1
while(tablang[++i]){
 if( tablang[i].className.indexOf(pays)>-1) {
     tablang[i].className=tablang[i].className.replace('off',"on")
     }
 else { 
	tablang[i].className=tablang[i].className.replace('on',"off");
    }
 }
 
	var textMode=false;
 
    var langImg=[];
    langImg['D']=['http://data.imagup.com/4/1112527798.jpg'];
    langImg['F']=['http://data.imagup.com/5/1112518499.jpg'];
 
    var menu=[];
    menu[0]=['']
    menu[1]=['']
 
    function remplace(tab,i){
        var url=(tab)?langImg[lang][i]:i;
        document.getElementById('D1').innerHTML='<img src="'+url+'" />';
    }
 
    function affiche(id){
        if(textMode){
            document.getElementById('D1').style.display='none';
            document.getElementById('D2').style.display='none';
            document.getElementById('D3').style.display='none';
            document.getElementById('D4').style.display='none';
 
            if(lang=='D'){
                document.getElementById('DDE').style.display='block';
                document.getElementById('DFR').style.display='none';
            }else{
                document.getElementById('DDE').style.display='none';
                document.getElementById('DFR').style.display='block';
            }
        }else{
            document.getElementById('DDE').style.display='none';
            document.getElementById('DFR').style.display='none';
 
            var url=langImg[lang][0];
 
            document.getElementById('D1').style.display='block';
            document.getElementById('D2').style.display='block';
            document.getElementById('D3').style.display='block';
            document.getElementById('D4').style.display='block';
 
            document.getElementById('img1').src=url;
 
            remplace(false,url);
        }
        return false;
    }
 
    function setTextMode(mode){
        textMode=(mode)?true:false;
        affiche(lang);
        return false;
    }
</script>
</head>
 
<body>
<div id="A">
  <div id="B">
     <div id="BEs"></div>
     <div id="B1"></div>
     <div id="B2"></div>
  </div>
  <div id="Es1"></div>
  <div id="C">
    <div id="CEs"></div>
    <div id="C1"></div>
    <div class="lang DE on">DE</div>
    <div id="C3"></div>
    <div class="lang FR off">FR</div>
    <div id="C5"></div>
    <div class="lang DE off">EN</div>
    <div id="C7"></div>
    <div id="C8" onclick="setTextMode(false);">AAAAA</div>
    <div id="C9"></div>
    <div id="C10" onclick="setTextMode(true);">AAA</div>
    <div id="C11"></div>
  </div>
  <div id="Es2"></div>
  <div id="D">
    <div id="D1"></div>
    <div id="D2"><img id="img1" src="http://data.imagup.com/4/1112527798.jpg" onclick="remplace(true,0);" height="40" width="70" /><br /><br /></div>
    <div id="D3"><img src="http://data.imagup.com/4/1112527767.jpg" onclick="remplace(false,this.src);" height="40" width="70" /><br /><br /></div>
    <div id="D4"><img src="http://data.imagup.com/5/1112518598.jpg" onclick="remplace(false,this.src);" height="40" width="70" /><br /></div>
    <div id="DDE"><p>Ici, le texte en <strong>Allemand</strong>...</p></div>
    <div id="DFR"><p>Ici, le texte en <strong>Français</strong>...</p></div>
    <div id="DEN"><p>Ici, le texte en <strong>Anglais</strong>...</p></div>
  </div>
  <div id="E"></div>
</div>
</body>
</html>

**SpaceFrog** · 02/03/2011, 12h06

oui !!!!

Alors en français ...
quand on te dit par exemple

"vire tout ce qu'il y a entre les balises script"
et que tu as :

Code :

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

1
2
3
<script type="text/javascript">
ici plein de code 
</script>

il en normal que tu conserves le contenu de la balise script ???

pour moi vider une balise donne comme resultat

Code :

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

1
2
<script type="text/javascript">
</script>

après si on me dit remplace le contenu de ta balise par "kjhkjhklh nouveau code"
moi je me retrouve avec :

Code :

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

1
2
3
<script type="text/javascript">
kjhkjhklh nouveau code
</script>

**qwertz1** · 02/03/2011, 12h50

J'ai pas tout saisi

j'ai fait comme tu as dit???

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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
 
<style type="text/css">
#A {
	width: 780px;
	margin-right: auto;
	margin-left: auto;
}
#B {
	height: 37px;
	width: 780px;
	font-family: "Cronos Pro";
	font-size: 17px;
	line-height: 13px;
	cursor: default
}
#BEs {
	height: 13px;
	width: 780px;
}
#B1 {
	height: 24px;
	width: 6px;
	float: left;
}
#B2 {
	height: 24px;
	width: 774px;
	text-align: left;
	float: left;
}
#Es1 {
	background-color: #FFF;
	height: 1px;
	width: 780px;
}
#C {
	height: 21px;
	width: 780px;
	font-family: "Cronos Pro";
	font-size: 11px;
	line-height: 13px;
}
#CEs {
	height: 4px;
	width: 780px;
}
#C1 {
	height: 17px;
	width: 6px;
	float: left;
}
#lang DE on {
	height: 17px;
	width: 28px;
	float: left;
	text-align: right;
	cursor: pointer
}
#C3 {
	height: 17px;
	width: 6px;
	float: left;
}
#lang FR off {
	height: 17px;
	width: 27px;
	float: left;
	text-align: right;
	cursor: pointer
}
#C5 {
	height: 17px;
	width: 6px;
	float: left;
}
#lang EN off {
	height: 17px;
	width: 28px;
	float: left;
	text-align: right;
	cursor: pointer;
}
#C7 {
	height: 17px;
	width: 50px;
	float: left;
}
#C8 {
	height: 17px;
	width: 70px;
	float: left;
	text-align: right;
	cursor: pointer
}
#C9 {
	height: 17px;
	width: 12px;
	float: left;}
#C10 {
	height: 17px;
	width: 21px;
	float: left;
	text-align: right;
	cursor: pointer
}
#C11 {
	height: 17px;
	width: 6px;
	float: left;
}
#Es2 {
	height: 10px;
	width: 780px;
}
#D {
	height: 400px;
	width: 780px;
}
#D1 {
	float: left;
	height: 400px;
	width: 700px;
	background-image: url(http://data.imagup.com/4/1112527798.jpg);
}
#D2 {
	text-align: right;
	float: left;
	width: 80px;
	cursor: pointer
}
#D3 {
	text-align: right;
	float: left;
	width: 80px;
	cursor: pointer
}
#D4 {
	text-align: right;
	float: left;
	width: 80px;
	cursor: pointer
}
#E {
	height: 21px;
	width: 780px;
}
    #DDE {
        display:none;
    }
    #DFR {
        display:none;
	}
	#DEN {
        display:none;
	}
	.on {display:block;
		}
    .off {display:none;
      }
}
</style>
<script type="text/javascript">
var tabpics=new Array();
tabpics['fr']=new Image()
tabpics['fr'].scr='imagefr.png';
tabpics['gb']=new Image()
tabpics['gb'].scr='imagefr.png';
tabpics['de']=new Image()
tabpics['de'].scr='imagefr.png';
 
 
function swaplang(pays){
//getsion des class lang pays 
var tabElts=document.getElementsByTagName('*')
var i=-1;
tablang=new Array();
while (tabElts[++i]){
if (tabElts[i].className.indexOf('lang')>-1){tablang.push(tabElts[i]);}
}
i=-1
while(tablang[++i]){
 if( tablang[i].className.indexOf(pays)>-1) {
     tablang[i].className=tablang[i].className.replace('off',"on")
     }
 else { 
	tablang[i].className=tablang[i].className.replace('on',"off");
    }
 }
 
// gestion de l'image:
   document.getElementById('drapeau').src=tabpics[pays].src
 }
 
</script>
</head>
 
<body>
<div id="A">
  <div id="B">
     <div id="BEs"></div>
     <div id="B1"></div>
     <div id="B2"></div>
  </div>
  <div id="Es1"></div>
  <div id="C">
    <div id="CEs"></div>
    <div id="C1"></div>
    <div class="lang DE on">DE</div>
    <div id="C3"></div>
    <div class="lang FR off">FR</div>
    <div id="C5"></div>
    <div class="lang DE off">EN</div>
    <div id="C7"></div>
    <div id="C8" onclick="setTextMode(false);">AAAAA</div>
    <div id="C9"></div>
    <div id="C10" onclick="setTextMode(true);">AAA</div>
    <div id="C11"></div>
  </div>
  <div id="Es2"></div>
  <div id="D">
    <div id="D1"></div>
    <div id="D2"><img id="img1" src="http://data.imagup.com/4/1112527798.jpg" onclick="remplace(true,0);" height="40" width="70" /><br /><br /></div>
    <div id="D3"><img src="http://data.imagup.com/4/1112527767.jpg" onclick="remplace(false,this.src);" height="40" width="70" /><br /><br /></div>
    <div id="D4"><img src="http://data.imagup.com/5/1112518598.jpg" onclick="remplace(false,this.src);" height="40" width="70" /><br /></div>
    <div id="DDE"><p>Ici, le texte en <strong>Allemand</strong>...</p></div>
    <div id="DFR"><p>Ici, le texte en <strong>Français</strong>...</p></div>
    <div id="DEN"><p>Ici, le texte en <strong>Anglais</strong>...</p></div>
  </div>
  <div id="E"></div>
</div>
</body>
</html>

**SpaceFrog** · 02/03/2011, 14h09

si tu n'appelles pas la fonction ??, ça sert à quoi ?

Je ne sais pas si c'est de désespoir ou la pitié mais voilà un code qui fonctionne

:

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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style type="text/css">
#A {
	width: 780px;
	margin-right: auto;
	margin-left: auto;
}
#B {
	height: 37px;
	width: 780px;
	font-family: "Cronos Pro";
	font-size: 17px;
	line-height: 13px;
	cursor: default
}
#BEs {
	height: 13px;
	width: 780px;
}
#B1 {
	height: 24px;
	width: 6px;
	float: left;
}
#B2 {
	height: 24px;
	width: 774px;
	text-align: left;
	float: left;
}
#Es1 {
	background-color: #FFF;
	height: 1px;
	width: 780px;
}
#C {
	height: 21px;
	width: 780px;
	font-family: "Cronos Pro";
	font-size: 11px;
	line-height: 13px;
}
#CEs {
	height: 4px;
	width: 780px;
}
#C1 {
	height: 17px;
	width: 6px;
	float: left;
}
.lang  {
	height: 17px;
	width: 28px;
	float: left;
	text-align: right;
	cursor: pointer
}
#C3 {
	height: 17px;
	width: 6px;
	float: left;
}
#C5 {
	height: 17px;
	width: 6px;
	float: left;
}
#C7 {
	height: 17px;
	width: 50px;
	float: left;
}
#C8 {
	height: 17px;
	width: 70px;
	float: left;
	text-align: right;
	cursor: pointer
}
#C9 {
	height: 17px;
	width: 12px;
	float: left;}
#C10 {
	height: 17px;
	width: 21px;
	float: left;
	text-align: right;
	cursor: pointer
}
#C11 {
	height: 17px;
	width: 6px;
	float: left;
}
#Es2 {
	height: 10px;
	width: 780px;
}
#D {
	height: 400px;
	width: 780px;
}
#D1 {
	float: left;
	height: 400px;
	width: 700px;
	background-Image: url(http://data.imagup.com/4/1112527798.jpg)
}
#D2 {
	text-align: right;
	float: left;
	width: 80px;
	cursor: pointer
}
#D3 {
	text-align: right;
	float: left;
	width: 80px;
	cursor: pointer
}
#D4 {
	text-align: right;
	float: left;
	width: 80px;
	cursor: pointer
}
#E {
	height: 21px;
	width: 780px;
}
 
	.on {display:block;
		}
    .off {display:none;
      }
}
</style>
<script type="text/javascript">
tabPics=new Array();
tabPics['DE']=new Image()
tabPics['DE'].src="http://data.imagup.com/4/1112527798.jpg"
tabPics['FR']=new Image()
tabPics['FR'].src="http://data.imagup.com/4/1112527767.jpg"
tabPics['EN']=new Image()
tabPics['EN'].src="http://data.imagup.com/5/1112518598.jpg"
 
function swaplang(pays){
//getsion des class lang pays 
var tabElts=document.getElementsByTagName('*')
var i=-1;
tablang=new Array();
while (tabElts[++i]){
if (tabElts[i].className.indexOf('lang')>-1){tablang.push(tabElts[i]);}
}
i=-1
while(tablang[++i]){
 if( tablang[i].className.indexOf(pays)>-1) {
     tablang[i].className=tablang[i].className.replace('off',"on")
     }
 else { 
	tablang[i].className=tablang[i].className.replace('on',"off");
    }
 }
 
 document.getElementById('D1').style.backgroundImage="url("+tabPics[pays].src+")"
  }
 
</script>
</head>
 
<body>
<div id="A">
  <div id="B">
     <div id="BEs"></div>
     <div id="B1"></div>
     <div id="B2"></div>
  </div>
  <div id="Es1"></div>
  <div id="C">
    <div id="CEs"></div>
    <div id="C1"></div>
    <div class="lang DE on">DE</div>
    <div id="C3"></div>
    <div class="lang FR off">FR</div>
    <div id="C5"></div>
    <div class="lang EN off">EN</div>
    <div id="C7"></div>
    <div id="C8" onclick="setTextMode(false);">AAAAA</div>
    <div id="C9"></div>
    <div id="C10" onclick="setTextMode(true);">AAA</div>
    <div id="C11"></div>
  </div>
  <div id="Es2"></div>
  <div id="D">
    <div id="D1">&nbsp;</div>
    <div id="D2"><img  src="http://data.imagup.com/4/1112527798.jpg" onclick="swaplang('DE');" height="40" width="70" /><br /><br /></div>
    <div id="D3"><img src="http://data.imagup.com/4/1112527767.jpg" onclick="swaplang('FR');" height="40" width="70" /><br /><br /></div>
    <div id="D4"><img src="http://data.imagup.com/5/1112518598.jpg" onclick="swaplang('EN');" height="40" width="70" /><br /></div>
    <div id="DDE" class="lang DE on"><p>Ici, le texte en <strong>Allemand</strong>...</p></div>
    <div id="DFR" class="lang FR off"><p>Ici, le texte en <strong>Français</strong>...</p></div>
    <div id="DEN" class="lang EN off"><p>Ici, le texte en <strong>Anglais</strong>...</p></div>
  </div>
  <div id="E"></div>
</div>
</body>
</html>

**qwertz1** · 02/03/2011, 14h35

Bin je comprend pas, mais ton dernier code ne fonctionne pas.

**SpaceFrog** · 02/03/2011, 14h51

chez moi sur ie ffx et chrome oui ...
là je laisse tomber
je ne peux plus rien pour toi

**qwertz1** · 02/03/2011, 15h21

Merci quand même!

**SpaceFrog** · 02/03/2011, 15h29

Par acquis de conscience j'ai fait un copier coller du code ci dessus et ça tourne nickel ...

Je sais pas tu le visualises avec quoi ??? IE FFX ... ???
javascript est activé ??? ton pc est allumé ?

**qwertz1** · 02/03/2011, 16h14

Sous Mac (FFX et Safari)

Moi j'ai le résultat suivant:

http://data.imagup.com/4/1113743188.png

En gros rien ne fonctionne.

En faite je souhaitais qu'après "DE"(Div C2) que soit aussi affiché "FR"(Div C4) puis "EN"(Div C6) et que lors d'un clic sur ces derniers, qu'ils modifient UNIQUEMENT la 1ere image de la Galerie et qu'il me change le Texte "AAAAA" et "AAA" dans la langue respectivement choisi.

Et que lorsque je clique sur "AAA"(C10) que celui-ci affiche les div caché (mais toujours selon la langue que j'ai choisi au préalable)

Et que lorsque je clique sur "AAAAA"(div C8) qu'il me retourne "A la gallérie (mais toujours en conservent la dernière langue sélectionné.

En 2 mots je souhaites obtenir le résultat de mon tout 1er code, mais avec une langue de plus.

**SpaceFrog** · 02/03/2011, 17h20

ben sur ton image c'est en allemand

si tu cliques sur le F a droite ... oh miracle !

**qwertz1** · 02/03/2011, 17h51

Oui mais c'est pas le résultat que je recherche!

Plutôt que de l'expliquer à nouveau regarde mon code D'ORIGINE et tu comprendra que ce n'est plus le même système de fonctionnement

Dans mon code d'origine lorsque tu clic sur une des petites images à droite, cela va simplement mettre la petite image dans la grande.

mais la ça fait un changement bizzard. Si je clic sur la 1ere petite image sa change la langue en Allemand, la 2eme petite image en Anglais et ainsi de suite. De plus, le texte qui s'affiche sous la petite image bleu ne devrais pas apparaitre (uniquement si je clic sur "AAA")

Sinon, je n'ai jamais affiché en même temps DE, FR et EN afin que je puisse directement cliquer dessus.

Pour finir lorsque en cas de clique sur DE, FR ou EN, je souhaite que seul la 1ere petite image de la gallérie soit changer (il y aura du texte dans la photo, mais seulement sur la 1ere petite, d'ou le changement par rapport à la langue)

**Eric2a** · 02/03/2011, 19h08

Salut,

qwertz1, poste ici le code d'origine et fonctionnel traitant uniquement les deux langues (FR & DE) que tu avais reçu via MP. (Je ne l'ai pas gardé).

Ce sera plus simple de l'adapter à d'autres langues.

**qwertz1** · 03/03/2011, 00h47

Voila

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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
 
<style type="text/css">
#A {
	width: 780px;
	margin-right: auto;
	margin-left: auto;
}
#B {
	height: 37px;
	width: 780px;
	font-family: "Cronos Pro";
	font-size: 17px;
	line-height: 13px;
	cursor: default
}
#BEs {
	height: 13px;
	width: 780px;
}
#B1 {
	height: 24px;
	width: 6px;
	float: left;
}
#B2 {
	height: 24px;
	width: 774px;
	text-align: left;
	float: left;
}
#Es1 {
	background-color: #FFF;
	height: 1px;
	width: 780px;
}
#C {
	height: 21px;
	width: 780px;
	font-family: "Cronos Pro";
	font-size: 11px;
	line-height: 13px;
}
#CEs {
	height: 4px;
	width: 780px;
}
#C1 {
	height: 17px;
	width: 6px;
	float: left;
}
#C2 {
	height: 17px;
	width: 28px;
	float: left;
	text-align: right;
	cursor: pointer
}
#C3 {
	height: 17px;
	width: 6px;
	float: left;
}
#C4 {
	height: 17px;
	width: 27px;
	float: left;
	text-align: right;
	cursor: pointer
}
#C5 {
	height: 17px;
	width: 6px;
	float: left;
}
#C6 {
	height: 17px;
	width: 28px;
	float: left;
	text-align: right;
	cursor: pointer;
}
#C7 {
	height: 17px;
	width: 50px;
	float: left;
}
#C8 {
	height: 17px;
	width: 70px;
	float: left;
	text-align: right;
	cursor: pointer
}
#C9 {
	height: 17px;
	width: 12px;
	float: left;}
#C10 {
	height: 17px;
	width: 21px;
	float: left;
	text-align: right;
	cursor: pointer
}
#C11 {
	height: 17px;
	width: 6px;
	float: left;
}
#Es2 {
	height: 10px;
	width: 780px;
}
#D {
	height: 400px;
	width: 780px;
}
#D1 {
	float: left;
	height: 400px;
	width: 700px;
	background-image: url(<a href="http://data.imagup.com/4/1112527798.jpg);" target="_blank">http://data.imagup.com/4/1112527798.jpg);</a>
}
#D2 {
	text-align: right;
	float: left;
	width: 80px;
	cursor: pointer
}
#D3 {
	text-align: right;
	float: left;
	width: 80px;
	cursor: pointer
}
#D4 {
	text-align: right;
	float: left;
	width: 80px;
	cursor: pointer
}
#E {
	height: 21px;
	width: 780px;
}
    #DDE {
        display:none;
    }
    #DFR {
        display:none;
}
</style>
<script type="text/javascript">
    var lang='D';
    var textMode=false;
*
    var langImg=[];
    langImg['D']=['http://data.imagup.com/4/1112527798.jpg'];
    langImg['F']=['http://data.imagup.com/5/1112518499.jpg'];
*
    var menu=[];
    menu[0]=['']
    menu[1]=['']
*
    function remplace(tab,i){
        var url=(tab)?langImg[lang][i]:i;
        document.getElementById('D1').innerHTML='<img src="'+url+'" />';
    }
*
    function affiche(id){
        lang=(id=='D')?'D':'F';
*
        if(lang=='D'){
            document.getElementById('C2').src=menu[0][0];
            document.getElementById('C4').src=menu[1][0];
        }else{
            document.getElementById('C2').src=menu[0][1];
            document.getElementById('C4').src=menu[1][1];
			document.getElementById('C6').src=menu[1][1];
        }
*
        var text=(lang=='D')?'AAAAA':'BBBBB';
        document.getElementById('C8').innerHTML=text;
 
		var text=(lang=='D')?'AAA':'BBB';
        document.getElementById('C10').innerHTML=text;
*
        if(textMode){
            document.getElementById('D1').style.display='none';
            document.getElementById('D2').style.display='none';
            document.getElementById('D3').style.display='none';
            document.getElementById('D4').style.display='none';
*
            if(lang=='D'){
                document.getElementById('DDE').style.display='block';
                document.getElementById('DFR').style.display='none';
            }else{
                document.getElementById('DDE').style.display='none';
                document.getElementById('DFR').style.display='block';
            }
        }else{
            document.getElementById('DDE').style.display='none';
            document.getElementById('DFR').style.display='none';
*
            var url=langImg[lang][0];
*
            document.getElementById('D1').style.display='block';
            document.getElementById('D2').style.display='block';
            document.getElementById('D3').style.display='block';
            document.getElementById('D4').style.display='block';
*
            document.getElementById('img1').src=url;
*
            remplace(false,url);
        }
        return false;
    }
*
    function setTextMode(mode){
        textMode=(mode)?true:false;
        affiche(lang);
        return false;
    }
</script>
</head>
*
<body>
<div id="A">
  <div id="B">
     <div id="BEs"></div>
     <div id="B1"></div>
     <div id="B2"></div>
  </div>
  <div id="Es1"></div>
  <div id="C">
    <div id="CEs"></div>
    <div id="C1"></div>
    <div id="C2" onclick="affiche('D');">DE</div>
    <div id="C3"></div>
    <div id="C4" onclick="affiche('F');">FR</div>
    <div id="C5"></div>
    <div id="C6" onclick="affiche('A');">EN</div>
    <div id="C7"></div>
    <div id="C8" onclick="setTextMode(false);">AAAAA</div>
    <div id="C9"></div>
    <div id="C10" onclick="setTextMode(true);">AAA</div>
    <div id="C11"></div>
  </div>
  <div id="Es2"></div>
  <div id="D">
    <div id="D1"></div>
    <div id="D2"><img id="img1" src="http://data.imagup.com/4/1112527798.jpg" onclick="remplace(true,0);" height="40" width="70" /><br /><br /></div>
    <div id="D3"><img src="http://data.imagup.com/4/1112527767.jpg" onclick="remplace(false,this.src);" height="40" width="70" /><br /><br /></div>
    <div id="D4"><img src="http://data.imagup.com/5/1112518598.jpg" onclick="remplace(false,this.src);" height="40" width="70" /><br /></div>
    <div id="DDE"><p>Ici, le texte en <strong>Allemand</strong>...</p></div>
    <div id="DFR"><p>Ici, le texte en <strong>Français</strong>...</p></div>
  </div>
  <div id="E"></div>
</div>
</body>
</html>

**Eric2a** · 03/03/2011, 01h00

Non c'est pas celui là...

Le code d'origine et fonctionnel (et surtout pas modifié) que je t'avais envoyé par MP.

Edit : C'est bon ! Je l'avais pas supprimé.

Le code ci-dessous est une mise à jour de celui proposé dans cette discussion.

Deux langues sont traitées (FR & DE) ainsi que le mode graphique (bouton C1) et le mode texte (bouton C2).

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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<!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;
	}
	#Z {
	height: 400px;
	width: 780px;
	background-color: #F00;
	}
	#FR {
		display:none;
	}
	#DE {
		display:none;
	}
	/*]]>*/
</style>
<script type="text/javascript">//<![CDATA[
	// Variables globales
 
	var lang='F';		// Langue courante
	var textMode=false;	// Mode texte ou image
 
	// Tableau d'URL des grandes images
	var langImg=[];
	langImg['F']=['http://data.imagup.com/5/1112518499.jpg','http://data.imagup.com/4/1112527767.jpg'];
	langImg['D']=['http://data.imagup.com/4/1112527798.jpg','http://data.imagup.com/5/1112688640.jpg'];
 
	// Tableau d'URL des petites images
	var menuImg=[];
	menuImg[0]=['http://data.imagup.com/5/1112778442.png','http://data.imagup.com/6/1112779286.png'];
	menuImg[1]=['http://data.imagup.com/6/1112778465.png','http://data.imagup.com/4/1112779328.png'];
 
	// Remplacement de la grande image
	function remplace(tab,i){
		/*	si tab == true alors
				i correspond à l'index dans le tableau langImg (langue sélectionnée)
			sinon
				i correspond à l'URL de l'image
		 */
		var url=(tab)?langImg[lang][i]:i;
		document.getElementById('D').innerHTML='<img src="'+url+'" />';
	}
 
	function affiche(id){
		// Sélection de la langue
		lang=(id=='F')?'F':'D';
 
		// Petites images (à droite des drapeaux)
		if(lang=='F'){
			document.getElementById('im1').src=menuImg[0][0];
			document.getElementById('im2').src=menuImg[1][0];
		}else{
			document.getElementById('im1').src=menuImg[0][1];
			document.getElementById('im2').src=menuImg[1][1];
		}
 
		// Texte
		var text=(lang=='F')?'Français':'Allemand';
		document.getElementById('C').innerHTML=text;
 
		if(textMode){
			// Cacher les div contenant les images
			document.getElementById('D').style.display='none';
			document.getElementById('E').style.display='none';
			document.getElementById('F').style.display='none';
			document.getElementById('G').style.display='none';
 
			if(lang=='F'){
				document.getElementById('DE').style.display='none';		// Cacher texte Allemand
				document.getElementById('FR').style.display='block';	// Montrer texte Français
			}else{
				document.getElementById('FR').style.display='none';		// Cacher texte Français
				document.getElementById('DE').style.display='block';	// Montrer texte Allemand
			}
		}else{
			// Cacher les div contenant les textes
			document.getElementById('FR').style.display='none';
			document.getElementById('DE').style.display='none';
 
			// Première image dans le tableau pour la langue sélectionnée (la rose)
			var url=langImg[lang][0];
 
			// Rendre visible les div contenant les images
			document.getElementById('D').style.display='block';
			document.getElementById('E').style.display='block';
			document.getElementById('F').style.display='block';
			document.getElementById('G').style.display='block';
 
			// Petite image #1
			document.getElementById('img1').src=url;
 
			// Petite image #2
			document.getElementById('img2').src=langImg[lang][1];
 
			// Grande Image
			remplace(false,url);
		}
		return false;
	}
 
	function setTextMode(mode){
		textMode=(mode)?true:false;
		affiche(lang);
		return false;
	}
//]]>
</script>
</head>
<body>
<div id="A">
	<div id="B">
		<img src="http://data.imagup.com/2/1105182592.png" onclick="affiche('F');" width="41" height="12" />&nbsp;&nbsp;
		<img src="http://data.imagup.com/3/1105182610.png" onclick="affiche('D');" width="41" height="12" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<img id="im1" src="http://data.imagup.com/5/1112778442.png" onclick="setTextMode(false);" width="41" height="12" />&nbsp;&nbsp;
		<img id="im2" src="http://data.imagup.com/6/1112778465.png" onclick="setTextMode(true);" width="41" height="12" />
	</div>
	<div id="C">Français</div>
	<div id="Z">
		<div id="D"></div>
 
		<div id="FR">
			<p>Ici, le texte en <strong>Français</strong>...</p>
		</div>
 
		<div id="DE">
			<p>Ici, le texte en <strong>Allemand</strong>...</p>
		</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>
</div>
</body>
</html>

Code ready for Spacefrogisation...

**SpaceFrog** · 03/03/2011, 08h19

Eric2a...
Mon code est fonctionnel

**qwertz1** · 03/03/2011, 11h31

Deux langues sont traitées (FR & DE) ainsi que le mode graphique (bouton C1) et le mode texte (bouton C2).

Dit de cette manière, ça parait tout de suite plus claire à comprendre

Oui c'est exactement le résultat que je recherche. Sinon nos 2 dernier code (ci-dessous) offre le même résultat, mais la seule différence entre les 2 et leur système de remplacement.

Mon code agit sur les div en changeant le texte, alors que l'ancien, le tiens, modifie des images (je parle pour les 4 boutons).

P.S: ma préférence va plutôt pour mon système de remplacement par action sur du texte que de remplacement d'image. (j'espère avoir été clair

Dans tout les cas, encore merci pour votre temps consacré.

TON CODE

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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<!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;
	}
	#Z {
	height: 400px;
	width: 780px;
	background-color: #F00;
	}
	#FR {
		display:none;
	}
	#DE {
		display:none;
	}
	/*]]>*/
</style>
<script type="text/javascript">//<![CDATA[
	// Variables globales
 
	var lang='F';		// Langue courante
	var textMode=false;	// Mode texte ou image
 
	// Tableau d'URL des grandes images
	var langImg=[];
	langImg['F']=['http://data.imagup.com/5/1112518499.jpg','http://data.imagup.com/4/1112527767.jpg'];
	langImg['D']=['http://data.imagup.com/4/1112527798.jpg','http://data.imagup.com/5/1112688640.jpg'];
 
	// Tableau d'URL des petites images
	var menuImg=[];
	menuImg[0]=['http://data.imagup.com/5/1112778442.png','http://data.imagup.com/6/1112779286.png'];
	menuImg[1]=['http://data.imagup.com/6/1112778465.png','http://data.imagup.com/4/1112779328.png'];
 
	// Remplacement de la grande image
	function remplace(tab,i){
		/*	si tab == true alors
				i correspond à l'index dans le tableau langImg (langue sélectionnée)
			sinon
				i correspond à l'URL de l'image
		 */
		var url=(tab)?langImg[lang][i]:i;
		document.getElementById('D').innerHTML='<img src="'+url+'" />';
	}
 
	function affiche(id){
		// Sélection de la langue
		lang=(id=='F')?'F':'D';
 
		// Petites images (à droite des drapeaux)
		if(lang=='F'){
			document.getElementById('im1').src=menuImg[0][0];
			document.getElementById('im2').src=menuImg[1][0];
		}else{
			document.getElementById('im1').src=menuImg[0][1];
			document.getElementById('im2').src=menuImg[1][1];
		}
 
		// Texte
		var text=(lang=='F')?'Français':'Allemand';
		document.getElementById('C').innerHTML=text;
 
		if(textMode){
			// Cacher les div contenant les images
			document.getElementById('D').style.display='none';
			document.getElementById('E').style.display='none';
			document.getElementById('F').style.display='none';
			document.getElementById('G').style.display='none';
 
			if(lang=='F'){
				document.getElementById('DE').style.display='none';		// Cacher texte Allemand
				document.getElementById('FR').style.display='block';	// Montrer texte Français
			}else{
				document.getElementById('FR').style.display='none';		// Cacher texte Français
				document.getElementById('DE').style.display='block';	// Montrer texte Allemand
			}
		}else{
			// Cacher les div contenant les textes
			document.getElementById('FR').style.display='none';
			document.getElementById('DE').style.display='none';
 
			// Première image dans le tableau pour la langue sélectionnée (la rose)
			var url=langImg[lang][0];
 
			// Rendre visible les div contenant les images
			document.getElementById('D').style.display='block';
			document.getElementById('E').style.display='block';
			document.getElementById('F').style.display='block';
			document.getElementById('G').style.display='block';
 
			// Petite image #1
			document.getElementById('img1').src=url;
 
			// Petite image #2
			document.getElementById('img2').src=langImg[lang][1];
 
			// Grande Image
			remplace(false,url);
		}
		return false;
	}
 
	function setTextMode(mode){
		textMode=(mode)?true:false;
		affiche(lang);
		return false;
	}
//]]>
</script>
</head>
<body>
<div id="A">
	<div id="B">
		<img src="http://data.imagup.com/2/1105182592.png" onclick="affiche('F');" width="41" height="12" />&nbsp;&nbsp;
		<img src="http://data.imagup.com/3/1105182610.png" onclick="affiche('D');" width="41" height="12" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<img id="im1" src="http://data.imagup.com/5/1112778442.png" onclick="setTextMode(false);" width="41" height="12" />&nbsp;&nbsp;
		<img id="im2" src="http://data.imagup.com/6/1112778465.png" onclick="setTextMode(true);" width="41" height="12" />
	</div>
	<div id="C">Français</div>
	<div id="Z">
		<div id="D"></div>
 
		<div id="FR">
			<p>Ici, le texte en <strong>Français</strong>...</p>
		</div>
 
		<div id="DE">
			<p>Ici, le texte en <strong>Allemand</strong>...</p>
		</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>
</div>
</body>
</html>

Code ready for Spacefrogisation...

MON CODE

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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
 
<style type="text/css">
#A {
	width: 780px;
	margin-right: auto;
	margin-left: auto;
}
#B {
	height: 37px;
	width: 780px;
	font-family: "Cronos Pro";
	font-size: 17px;
	line-height: 13px;
	cursor: default
}
#BEs {
	height: 13px;
	width: 780px;
}
#B1 {
	height: 24px;
	width: 6px;
	float: left;
}
#B2 {
	height: 24px;
	width: 774px;
	text-align: left;
	float: left;
}
#Es1 {
	background-color: #FFF;
	height: 1px;
	width: 780px;
}
#C {
	height: 21px;
	width: 780px;
	font-family: "Cronos Pro";
	font-size: 11px;
	line-height: 13px;
}
#CEs {
	height: 4px;
	width: 780px;
}
#C1 {
	height: 17px;
	width: 6px;
	float: left;
}
#C2 {
	height: 17px;
	width: 28px;
	float: left;
	text-align: right;
	cursor: pointer
}
#C3 {
	height: 17px;
	width: 6px;
	float: left;
}
#C4 {
	height: 17px;
	width: 27px;
	float: left;
	text-align: right;
	cursor: pointer
}
#C5 {
	height: 17px;
	width: 6px;
	float: left;
}
#C6 {
	height: 17px;
	width: 28px;
	float: left;
	text-align: right;
	cursor: pointer;
}
#C7 {
	height: 17px;
	width: 50px;
	float: left;
}
#C8 {
	height: 17px;
	width: 70px;
	float: left;
	text-align: right;
	cursor: pointer
}
#C9 {
	height: 17px;
	width: 12px;
	float: left;}
#C10 {
	height: 17px;
	width: 21px;
	float: left;
	text-align: right;
	cursor: pointer
}
#C11 {
	height: 17px;
	width: 6px;
	float: left;
}
#Es2 {
	height: 10px;
	width: 780px;
}
#D {
	height: 400px;
	width: 780px;
}
#D1 {
	float: left;
	height: 400px;
	width: 700px;
	background-image: url(<a href="http://data.imagup.com/4/1112527798.jpg);" target="_blank">http://data.imagup.com/4/1112527798.jpg);</a>
}
#D2 {
	text-align: right;
	float: left;
	width: 80px;
	cursor: pointer
}
#D3 {
	text-align: right;
	float: left;
	width: 80px;
	cursor: pointer
}
#D4 {
	text-align: right;
	float: left;
	width: 80px;
	cursor: pointer
}
#E {
	height: 21px;
	width: 780px;
}
    #DDE {
        display:none;
    }
    #DFR {
        display:none;
}
</style>
<script type="text/javascript">
    var lang='D';
    var textMode=false;
*
    var langImg=[];
    langImg['D']=['http://data.imagup.com/4/1112527798.jpg'];
    langImg['F']=['http://data.imagup.com/5/1112518499.jpg'];
*
    var menu=[];
    menu[0]=['']
    menu[1]=['']
*
    function remplace(tab,i){
        var url=(tab)?langImg[lang][i]:i;
        document.getElementById('D1').innerHTML='<img src="'+url+'" />';
    }
*
    function affiche(id){
        lang=(id=='D')?'D':'F';
*
        if(lang=='D'){
            document.getElementById('C2').src=menu[0][0];
            document.getElementById('C4').src=menu[1][0];
        }else{
            document.getElementById('C2').src=menu[0][1];
            document.getElementById('C4').src=menu[1][1];
			document.getElementById('C6').src=menu[1][1];
        }
*
        var text=(lang=='D')?'AAAAA':'BBBBB';
        document.getElementById('C8').innerHTML=text;
 
		var text=(lang=='D')?'AAA':'BBB';
        document.getElementById('C10').innerHTML=text;
*
        if(textMode){
            document.getElementById('D1').style.display='none';
            document.getElementById('D2').style.display='none';
            document.getElementById('D3').style.display='none';
            document.getElementById('D4').style.display='none';
*
            if(lang=='D'){
                document.getElementById('DDE').style.display='block';
                document.getElementById('DFR').style.display='none';
            }else{
                document.getElementById('DDE').style.display='none';
                document.getElementById('DFR').style.display='block';
            }
        }else{
            document.getElementById('DDE').style.display='none';
            document.getElementById('DFR').style.display='none';
*
            var url=langImg[lang][0];
*
            document.getElementById('D1').style.display='block';
            document.getElementById('D2').style.display='block';
            document.getElementById('D3').style.display='block';
            document.getElementById('D4').style.display='block';
*
            document.getElementById('img1').src=url;
*
            remplace(false,url);
        }
        return false;
    }
*
    function setTextMode(mode){
        textMode=(mode)?true:false;
        affiche(lang);
        return false;
    }
</script>
</head>
*
<body>
<div id="A">
  <div id="B">
     <div id="BEs"></div>
     <div id="B1"></div>
     <div id="B2"></div>
  </div>
  <div id="Es1"></div>
  <div id="C">
    <div id="CEs"></div>
    <div id="C1"></div>
    <div id="C2" onclick="affiche('D');">DE</div>
    <div id="C3"></div>
    <div id="C4" onclick="affiche('F');">FR</div>
    <div id="C5"></div>
    <div id="C6" onclick="affiche('A');">EN</div>
    <div id="C7"></div>
    <div id="C8" onclick="setTextMode(false);">AAAAA</div>
    <div id="C9"></div>
    <div id="C10" onclick="setTextMode(true);">AAA</div>
    <div id="C11"></div>
  </div>
  <div id="Es2"></div>
  <div id="D">
    <div id="D1"></div>
    <div id="D2"><img id="img1" src="http://data.imagup.com/4/1112527798.jpg" onclick="remplace(true,0);" height="40" width="70" /><br /><br /></div>
    <div id="D3"><img src="http://data.imagup.com/4/1112527767.jpg" onclick="remplace(false,this.src);" height="40" width="70" /><br /><br /></div>
    <div id="D4"><img src="http://data.imagup.com/5/1112518598.jpg" onclick="remplace(false,this.src);" height="40" width="70" /><br /></div>
    <div id="DDE"><p>Ici, le texte en <strong>Allemand</strong>...</p></div>
    <div id="DFR"><p>Ici, le texte en <strong>Français</strong>...</p></div>
  </div>
  <div id="E"></div>
</div>
</body>
</html>

**SpaceFrog** · 03/03/2011, 12h12

Code ready for Spacefrogisation...

A quoi bon

Swap d'images sur onclick pour modification de langue

JavaScript

Discussions similaires

Partager

Partager