réduire la largeur d'un texte défilant

**laurentSc** · 10/01/2011, 14h21

Bonjour,

j'utilise un script js pour faire un texte défilant qui contient des liens et qui s'arrête de défiler quand on le survole. Voici le résultat
et voici le 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
<style type="text/css">
.txt_defil {font-size:11px;font-family:Arial;color:#FFFFFF;text-decoration:none}
.txt_defil:link {font-size:11px;font-family:Arial;color:#FFFFFF;text-decoration:none}
.txt_defil:visited {font-size:11px;font-family:Arial;color:#FFFFFF;text-decoration:none}
.txt_defil:hover {font-size:11px;font-family:Arial;color:#FFFFFF;text-decoration:underline}
</style>
<script language="JavaScript"> <!--
var txt_defil_width = 1000; //largeur
var txt_defil_height = 23; //hauteur
var txt_defil_bgcolor = 'green'; //couleur de fond
var txt_defil_background = ""; //image de fond
var txt_defil_info = new Array;
txt_defil_info[0]='<a href="http://www.stdswebport.org/index.php?langue=fr" target="_blank" CLASS=txt_defil><b>Si vous avez besoin de normes, inscrivez-vous &agrave; StandardsWebPort. </b></a> &nbsp;&nbsp;&nbsp;<b>En 2011 nouvel acc&egrave;s possible aux Bases Documentaires des Techniques de l\'Ing&eacute;nieur,</b>&nbsp;&nbsp; <a href=""><b> plus d\'infos</b></a>';
//-->
</script>
<script language="JavaScript" src="textdefil_ho1.js"></script>

avec le code du fichier js :

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
//PLF - http://www.jejavascript.net/
function writext(texdef)
	{
	document.write(texdef);
	}
 
writext('<DIV ID=txt_defil_relativ onMouseOver="txt_defil_stop()" onMouseOut="txt_defil_rstart()" STYLE="position:relative;width:'+txt_defil_width +';height:'+txt_defil_height+';background-color:'+txt_defil_bgcolor+';background-image:url('+txt_defil_background+')">');
writext('<DIV ID=txt_defil_cadre STYLE="position:absolute;width:'+(txt_defil_width -3)+';height:'+(txt_defil_height-8)+';top:4;left:1;clip:rect(0 '+(txt_defil_width -3)+' '+(txt_defil_height-8)+' 0)">');
writext('<div id=txt_defiler_1 style="position:absolute;width:'+(txt_defil_width -3)+';left:0;top:0;" CLASS=txt_defil >'+txt_defil_info[0]+'</DIV>');
writext('<div id=txt_defiler_2 style="position:absolute;width:'+(txt_defil_width -3)+';left:'+txt_defil_width+';top:0;" CLASS=txt_defil >'+txt_defil_info[1]+'</DIV>');
writext('</DIV></DIV>');
 
txt_defil_1 =1;
txt_defil_2 = 0;
stop_mouss=0;
 
function txt_defil_f1()
	{
	if(txt_defil_1 == 1) 
		{
		txt_defil_haut = "txt_defiler_1";
		txt_defil_bas = "txt_defiler_2";
		txt_defil_1 = 0;
		}
	else
		{
		txt_defil_bas = "txt_defiler_1";
		txt_defil_haut = "txt_defiler_2";
		txt_defil_1 = 1;
		}
	txt_defil_nb_info = txt_defil_info.length-1; 
	if(txt_defil_2 == txt_defil_nb_info)
		txt_defil_next = 0;
	else
		txt_defil_next = txt_defil_2+1;
 
	if(document.getElementById)
		document.getElementById(txt_defil_bas).innerHTML = txt_defil_info[txt_defil_next];
	txt_defil_left = 0;
	if(document.getElementById)
	txt_defil_f2 ()
	}
 
function txt_defil_f2 ()
	{
if (stop_mouss == 0)
{	
	txt_defil_left -= 2;
	document.getElementById(txt_defil_haut).style.left = txt_defil_left;
	document.getElementById(txt_defil_bas).style.left = txt_defil_left+txt_defil_width;
	if((txt_defil_left+txt_defil_width) > 0)
	move2=setTimeout("txt_defil_f2 ()",5)
	else
		txt_defil_f3()
}
else	move1=setTimeout("txt_defil_f2 ()",1000)	
	}
 
function txt_defil_f3()
	{
	txt_defil_2 = txt_defil_next;
	txt_defil_f1()
	}
function txt_defil_stop()
	{
	stop_mouss=1;
	}
function txt_defil_rstart()
	{
	stop_mouss=0;
	}		
window.onload = txt_defil_f1;

Mon problème, c'est que pour voir tout le texte, je suis obligé de faire un texte défilant très large ; or, je voudrais le faire environ 2 fois moins large, mais du coup, toute la fin du texte disparaît ; comment peut-on faire ?

**NoSmoking** · 10/01/2011, 18h15

Bonjour,

Mon problème, c'est que pour voir tout le texte, je suis obligé de faire un texte défilant très large ; or, je voudrais le faire environ 2 fois moins large, mais du coup, toute la fin du texte disparaît ; comment peut-on faire ?

pour le faire 2 fois moins large, fait le sur 2 lignes, par insertion d'un élément BR dans ton texte.

skandhal · 10/01/2011, 18h20

Tu peux peut être utiliser aussi la proprité title qui affiche un texte au survol de l'élément, qui peut être un lien, une image, etc

**laurentSc** · 10/01/2011, 22h00

J'opte finalement pour la solution des <br> (Finalement, c'est mieux sur 3 lignes). J'avais imaginé une solution bien plus compliquée : l'intégrer dans un div avec une propriété display à block et overflow à hidden (il y a des chances que ça ait permis de faire tout tenir sur une seule ligne, sans pouvoir tout voir à la fois, mais c'est beaucoup plus compliqué et je n'ai pas envie de me lancer là-dedans ; j'aimerais quand même avoir un avis sur cette solution).

**ABCIWEB** · 10/01/2011, 22h55

Regardes ce code la:

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
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Générateur d'objets défilants http://www.abciweb.net</title>
<script type="text/javascript">
<!--
// Objets défilants A. Bontemps, abciweb.net Version 2.1
function DF_ObjetDefilant(id,id_dim,mode,sens,vit,pos,b_esp,pause)
{
        this.DF_ObjetParam = typeof this.DF_ObjetParam == 'undefined' ? new Array() : this.DF_ObjetParam;      
        this.DF_ObjetParam[id] = typeof this.DF_ObjetParam[id] == 'undefined' ? new Array() : this.DF_ObjetParam[id];  
 
        if(typeof this.DF_ObjetParam[id]['id_defile'] == 'undefined') {Set_param (id,id_dim,mode,sens,vit,pos,b_esp,pause);}
        else
        if (this.DF_ObjetParam[id]['dim_defilant'] > 0)
        {
                if (this.DF_ObjetParam[id]['mode'] == 'r') {Boucle_ar(id);} else {Boucle_cont(id);}
 
                this.DF_ObjetParam[id]['Timer'] = setTimeout(function(){DF_ObjetDefilant(id)},this.DF_ObjetParam[id]['delaicrnt']);    
        }
 
 
 
        function Set_param (id,id_dim,mode,sens,vit,pos,b_esp,pause)
        {      
                var id_d = null;
                var id_c = null;
                var id_cc = null;
 
 
                if(!(id_d = document.getElementById(id))) {id_d = null;} else if(!(id_c = id_d.parentNode)) {id_c = null;}
                else if(!(id_cc = id_c.parentNode)) {id_cc = null;};
 
                if(id_c != null && id_cc != null && id_d != null)
                {
                function is_all_ws ( nod )
                        {
                          // Use ECMA-262 Edition 3 String and RegExp features
                          return !(/[^\t\n\r ]/.test(nod.data));
                        }
 
 
                function is_ignorable ( nod )
                        {
                          return (nod.nodeType == 8) || // A comment node
                                         ( (nod.nodeType == 3) && is_all_ws(nod) ); // a text node, all ws
                        }
 
 
                function trim_debut (myString)
                        {
                                return myString.replace(/^\s+/g,'')
                        }
 
 
                function trim_fin (myString)
                        {
                                return myString.replace(/\s+$/g,'')
                        }
 
 
                // Nettoyage mise en page html Mozilla Chrome...
                if (id_d != null)
                        {
                                while (id_d.hasChildNodes() && is_ignorable(id_d.lastChild)) {id_d.removeChild(id_d.lastChild);}
                                while (id_d.hasChildNodes() && is_ignorable(id_d.firstChild)) {id_d.removeChild(id_d.firstChild);}
                        }      
                }
 
                if(id_c != null && id_cc != null && id_d != null && id_d.hasChildNodes())
                        {
                                this.DF_ObjetParam[id]['instance'] = typeof this.DF_ObjetParam[id]['instance'] == 'undefined' ? function () {DF_ObjetDefilant(id,id_dim,mode,sens,vit,pos,b_esp,pause);} : this.DF_ObjetParam[id]['instance'];
 
                                this.DF_ObjetParam[id]['sens_ini'] = typeof sens != 'undefined' && (sens == 'g' || sens == 'd' || sens == 'h' || sens == 'b') ? sens : 'g';
 
                                this.DF_ObjetParam[id]['sens_horizontal'] = this.DF_ObjetParam[id]['sens_ini'] == 'g' || this.DF_ObjetParam[id]['sens_ini'] == 'd' ? true : false;     
 
                                id_cc.style.overflow = "hidden";
 
                                id_c.style.visibility = "hidden";
                                id_c.style.position = "relative";
                                id_c.style.overflow = "hidden";
 
 
                                id_d.style.position = "absolute";
                                id_d.style.width = "auto";
                                id_d.style.height = "auto";
 
 
                                // Nettoyage espaces vides en début de défilant pour le mode horizontal
                                var elem = id_d.firstChild;    
 
                                if (elem.nodeType == 3 && this.DF_ObjetParam[id]['sens_horizontal'])
                                        {
                                                var noeud_debut = document.createTextNode(trim_debut(elem.nodeValue));
                                                id_d.replaceChild(noeud_debut, id_d.firstChild);
                                        }
 
                                // Nettoyage espaces vides en fin de défilant
                                elem = id_d.lastChild; 
 
                                if (elem.nodeType == 3)
                                        {
                                                var noeud_fin = document.createTextNode(trim_fin(elem.nodeValue));
                                                id_d.replaceChild(noeud_fin, id_d.lastChild);
                                        }
 
 
                                var div_defile = id_d.cloneNode(true);
 
                                var espace_insecable = document.createTextNode("\u00a0");
 
                                // Ajoute un espace insécable "\u00a0" si 'BR' est en fin de défilant pour le mode vertical (pour ie)
                                if(!this.DF_ObjetParam[id]['sens_horizontal'] && div_defile.lastChild.nodeName == 'BR')
                                {
                                        div_defile.appendChild(espace_insecable);
                                }
 
 
                                var c = document.createElement("div");
                                c.style.height = "100%";
 
                                var nb_noeud = id_c.childNodes.length;
 
 
                                // Dimensions du cadre
                                for (var i = 0; i < nb_noeud ; i++) {id_c.removeChild(id_c.firstChild);}
                                id_c.appendChild(c);
 
                                this.DF_ObjetParam[id]['hauteur_cadre'] = c.offsetHeight;
                                this.DF_ObjetParam[id]['largeur_cadre'] = c.offsetWidth;
                                id_c.removeChild(id_c.firstChild);
                                id_c.appendChild(div_defile);                  
 
                                this.DF_ObjetParam[id]['id_defile'] = document.getElementById(id);
 
 
                                // Dimensions du défilant     
                                var id_dim = typeof id_dim == 'undefined' || trim_debut(id_dim) == '' || id_dim == 'auto' ? 'auto' :  parseInt(id_dim);
 
                                if(this.DF_ObjetParam[id]['sens_horizontal'])
                                        {
                                                this.DF_ObjetParam[id]['id_defile'].style.height = this.DF_ObjetParam[id]['hauteur_cadre']+'px';
 
                                                this.DF_ObjetParam[id]['largeur_def'] = id_dim == 'auto' ? undefined : id_dim;
 
                                                if (typeof this.DF_ObjetParam[id]['largeur_def'] == 'undefined')
                                                {
                                                        id_c.style.width = '1000000px';//largeur maxi de calcul
 
                                                        this.DF_ObjetParam[id]['largeur_def'] = this.DF_ObjetParam[id]['id_defile'].offsetWidth;
 
                                                        id_c.style.width = 'auto';
                                                }
 
                                                this.DF_ObjetParam[id]['id_defile'].style.width = this.DF_ObjetParam[id]['largeur_def']+'px';
 
                                        }
                                        else
                                        {
                                                this.DF_ObjetParam[id]['id_defile'].style.width = this.DF_ObjetParam[id]['largeur_cadre']+'px';
 
                                                this.DF_ObjetParam[id]['hauteur_def'] = id_dim == 'auto' ? this.DF_ObjetParam[id]['id_defile'].offsetHeight : id_dim;
 
                                                this.DF_ObjetParam[id]['id_defile'].style.height = this.DF_ObjetParam[id]['hauteur_def']+'px';
                                        }
 
 
 
                                this.DF_ObjetParam[id]['dim_cadre'] = this.DF_ObjetParam[id]['sens_horizontal'] ? this.DF_ObjetParam[id]['largeur_cadre'] : this.DF_ObjetParam[id]['hauteur_cadre'];
 
                                this.DF_ObjetParam[id]['dim_defilant'] = this.DF_ObjetParam[id]['sens_horizontal'] ? this.DF_ObjetParam[id]['largeur_def'] : this.DF_ObjetParam[id]['hauteur_def'];
 
 
                                this.DF_ObjetParam[id]['mode'] = typeof mode != 'undefined' && (mode == 'r' || mode == 'b') ? mode : 'b';
 
                                this.DF_ObjetParam[id]['vitesse'] = typeof vit != 'undefined' && parseInt(vit) > 0 ? parseInt(vit) : 20;
 
                                this.DF_ObjetParam[id]['psinit'] = typeof pos != 'undefined' && parseFloat(pos) > 0 ? parseFloat(pos) : 0;
 
                                this.DF_ObjetParam[id]['b_esp'] = typeof b_esp != 'undefined' && parseFloat(b_esp) > 0 ? parseFloat(b_esp) : 0;        
 
                                this.DF_ObjetParam[id]['pause'] = typeof pause != 'undefined' && parseInt(pause) > 0 ? parseInt(pause) : 0;
 
 
                                this.DF_ObjetParam[id]['b_esp'] = this.DF_ObjetParam[id]['b_esp'] < 0  || this.DF_ObjetParam[id]['b_esp'] > 100 || this.DF_ObjetParam[id]['mode'] == 'r' ? 0 : Math.ceil(this.DF_ObjetParam[id]['b_esp'] * this.DF_ObjetParam[id]['dim_cadre']/100);
 
 
                                this.DF_ObjetParam[id]['psinit'] = this.DF_ObjetParam[id]['psinit'] == 100 || this.DF_ObjetParam[id]['psinit'] < 0 || this.DF_ObjetParam[id]['psinit'] > 100 ? this.DF_ObjetParam[id]['dim_cadre'] : Math.ceil(this.DF_ObjetParam[id]['psinit']*this.DF_ObjetParam[id]['dim_cadre']/100);              
 
 
                                this.DF_ObjetParam[id]['psinit'] = (this.DF_ObjetParam[id]['dim_cadre'] > this.DF_ObjetParam[id]['dim_defilant'] &&  this.DF_ObjetParam[id]['psinit'] == 0 ) ? this.DF_ObjetParam[id]['dim_cadre'] - this.DF_ObjetParam[id]['dim_defilant'] : this.DF_ObjetParam[id]['psinit'];
 
 
                                this.DF_ObjetParam[id]['pscrnt'] = this.DF_ObjetParam[id]['psinit'];
 
                                this.DF_ObjetParam[id]['sens'] = 1;
 
                                this.DF_ObjetParam[id]['p_retour'] = this.DF_ObjetParam[id]['dim_defilant'] >= this.DF_ObjetParam[id]['dim_cadre'] ? this.DF_ObjetParam[id]['dim_defilant'] - this.DF_ObjetParam[id]['dim_cadre'] : 0;
 
                                this.DF_ObjetParam[id]['dim_defilant'] += this.DF_ObjetParam[id]['b_esp'];                                                                                                             
 
                                this.DF_ObjetParam[id]['p_retour'] = this.DF_ObjetParam[id]['mode'] == 'b' ? this.DF_ObjetParam[id]['dim_defilant'] : this.DF_ObjetParam[id]['p_retour'];
 
 
                                if (this.DF_ObjetParam[id]['mode'] == 'r' && this.DF_ObjetParam[id]['dim_defilant'] == this.DF_ObjetParam[id]['dim_cadre'] && this.DF_ObjetParam[id]['psinit'] == 0) {this.DF_ObjetParam[id]['dim_defilant'] = 0;}
 
                                if (this.DF_ObjetParam[id]['dim_defilant'] > 0 && this.DF_ObjetParam[id]['mode'] == 'b') {Ajout_clone(id);}
 
 
                                id_cc.style.overflow = "visible";
                                id_c.style.visibility = "visible";     
 
 
                                this.DF_ObjetParam[id]['instance']();  
                }
        }
 
 
 
        function Ajout_clone(id)
        {              
                var div_contenu = document.createElement("div");
 
                var nb_noeud = this.DF_ObjetParam[id]['id_defile'].childNodes.length;
 
                for (var i = 0; i < nb_noeud ; i++)
                        {                                  
                                div_contenu.appendChild(this.DF_ObjetParam[id]['id_defile'].firstChild.cloneNode(true));
                                this.DF_ObjetParam[id]['id_defile'].removeChild(this.DF_ObjetParam[id]['id_defile'].firstChild);
                        }
 
                if (this.DF_ObjetParam[id]['b_esp'] > 0)
                {
                        if (this.DF_ObjetParam[id]['sens_horizontal'])
                                {
                                        this.DF_ObjetParam[id]['sens_ini'] == 'g' ? div_contenu.style.marginRight = this.DF_ObjetParam[id]['b_esp']+'px' : div_contenu.style.marginLeft = this.DF_ObjetParam[id]['b_esp']+'px';        
                                }
                                else
                                {
                                        this.DF_ObjetParam[id]['sens_ini'] == 'h' ? div_contenu.style.marginBottom = this.DF_ObjetParam[id]['b_esp']+'px' : div_contenu.style.marginTop = this.DF_ObjetParam[id]['b_esp']+'px';                                
                                }
                }
 
                if (this.DF_ObjetParam[id]['sens_horizontal']) {div_contenu.style.display = "inline";};                                
 
                this.DF_ObjetParam[id]['id_defile'].appendChild(div_contenu.cloneNode(true));
 
                var nb_clone = Math.ceil(this.DF_ObjetParam[id]['dim_cadre']/(this.DF_ObjetParam[id]['dim_defilant']));
 
                if (this.DF_ObjetParam[id]['sens_horizontal'])
                        {
                           this.DF_ObjetParam[id]['id_defile'].style.width = ((nb_clone+1) * this.DF_ObjetParam[id]['dim_defilant'])+'px';
                        }
                        else
                        {
                           this.DF_ObjetParam[id]['id_defile'].style.height = ((nb_clone+1) * this.DF_ObjetParam[id]['dim_defilant'])+'px';
                        }
 
                for (var j = 0; j < nb_clone ; j++)
                        {
                                this.DF_ObjetParam[id]['id_defile'].appendChild(this.DF_ObjetParam[id]['id_defile'].firstChild.cloneNode(true));    
                        }
        }
 
 
 
        function Boucle_cont(id)
        {
                this.DF_ObjetParam[id]['delaicrnt'] = this.DF_ObjetParam[id]['vitesse'];
                this.DF_ObjetParam[id]['inverse'] = 1;
 
                if(this.DF_ObjetParam[id]['pscrnt'] == - this.DF_ObjetParam[id]['p_retour'])   
                                {                                      
                                        this.DF_ObjetParam[id]['id_defile'].appendChild(this.DF_ObjetParam[id]['id_defile'].firstChild.cloneNode(true));  
                                        this.DF_ObjetParam[id]['id_defile'].removeChild(this.DF_ObjetParam[id]['id_defile'].firstChild);
 
                                        this.DF_ObjetParam[id]['inverse'] = -1;        
                                        this.DF_ObjetParam[id]['pscrnt'] = 0;
                                        this.DF_ObjetParam[id]['sens'] = -1;           
                                }              
                                else
                                {
                                        if(this.DF_ObjetParam[id]['pscrnt'] == this.DF_ObjetParam[id]['psinit'])
                                                {
                                                        this.DF_ObjetParam[id]['sens'] *= -1;
                                                        this.DF_ObjetParam[id]['delaicrnt'] = this.DF_ObjetParam[id]['pause'];
                                                }
                                }
 
                        if (this.DF_ObjetParam[id]['sens_horizontal'])
                                {
                                        this.DF_ObjetParam[id]['sens_ini'] == 'g' ? this.DF_ObjetParam[id]['id_defile'].style.left = this.DF_ObjetParam[id]['pscrnt']+"px" : this.DF_ObjetParam[id]['id_defile'].style.right = this.DF_ObjetParam[id]['pscrnt']+"px" ;
                                }
                                else
                                {
                                        this.DF_ObjetParam[id]['sens_ini'] == 'h' ? this.DF_ObjetParam[id]['id_defile'].style.top = this.DF_ObjetParam[id]['pscrnt']+"px" : this.DF_ObjetParam[id]['id_defile'].style.bottom = this.DF_ObjetParam[id]['pscrnt']+"px" ;
                                }
 
                        this.DF_ObjetParam[id]['pscrnt'] += this.DF_ObjetParam[id]['sens'];
        }
 
 
 
        function Boucle_ar (id)
        {
                this.DF_ObjetParam[id]['delaicrnt'] = this.DF_ObjetParam[id]['vitesse'];
                this.DF_ObjetParam[id]['inverse'] = 1;
 
                if(this.DF_ObjetParam[id]['pscrnt']  == - this.DF_ObjetParam[id]['p_retour'] || this.DF_ObjetParam[id]['pscrnt'] == this.DF_ObjetParam[id]['psinit'])
                        {
                                this.DF_ObjetParam[id]['inverse'] = -1;
                                this.DF_ObjetParam[id]['delaicrnt'] = this.DF_ObjetParam[id]['pause'];
                                this.DF_ObjetParam[id]['sens'] *= -1;
                        }
 
                if (this.DF_ObjetParam[id]['sens_horizontal'])
                        {              
                                this.DF_ObjetParam[id]['sens_ini'] == 'g' ? this.DF_ObjetParam[id]['id_defile'].style.left = this.DF_ObjetParam[id]['pscrnt']+"px" : this.DF_ObjetParam[id]['id_defile'].style.right = this.DF_ObjetParam[id]['pscrnt']+"px" ;
                        }
                        else
                        {
                                this.DF_ObjetParam[id]['sens_ini'] == 'h' ? this.DF_ObjetParam[id]['id_defile'].style.top = this.DF_ObjetParam[id]['pscrnt']+"px" : this.DF_ObjetParam[id]['id_defile'].style.bottom = this.DF_ObjetParam[id]['pscrnt']+"px" ;
 
                        }
 
                this.DF_ObjetParam[id]['pscrnt'] += this.DF_ObjetParam[id]['sens'];
        }
 
}
 
 
 
function DF_ObjetNavigMous(id,etat,nb)
{
        var nb = typeof nb == 'undefined'? 0 :  nb + 1;
 
        if(typeof this.DF_ObjetParam != 'undefined' && typeof this.DF_ObjetParam[id] != 'undefined' && this.DF_ObjetParam[id]['id_defile'] != null && typeof this.DF_ObjetParam[id]['instance'] != 'undefined' && typeof this.DF_ObjetParam[id]['Timer'] == 'number')
                {
                        clearTimeout(this.DF_ObjetParam[id]['Timer']);
                        this.DF_ObjetParam[id]['Timer'] = 0;
                        if (etat == 'out') this.DF_ObjetParam[id]['instance']();
                }
                else if (nb < 30)//pour ancien navigateur avec chargement onload de DF_ObjetDefilant_Off(id)
                {
                        setTimeout(function(){DF_ObjetNavigMous(id,etat,nb)},15);
                }
}
 
 
 
function DF_ObjetSensInverse (id)
{
        if(typeof this.DF_ObjetParam != 'undefined' && typeof this.DF_ObjetParam[id] != 'undefined' && this.DF_ObjetParam[id]['id_defile'] != null && typeof this.DF_ObjetParam[id]['Timer'] == 'number' && this.DF_ObjetParam[id]['inverse'] == 1 && !(this.DF_ObjetParam[id]['pscrnt']  == - this.DF_ObjetParam[id]['p_retour'] || this.DF_ObjetParam[id]['pscrnt'] == this.DF_ObjetParam[id]['psinit']))
                {
                        this.DF_ObjetParam[id]['sens'] *= -1;
                }
}
 
 
 
function DF_ObjetDefilant_On (id)
{
        if(typeof this.DF_ObjetParam[id]['id_defile'] == 'undefined' && typeof this.DF_ObjetParam[id]['instance'] != 'undefined')
                {
                        this.DF_ObjetParam[id]['instance']();  
                }
                else
                {
                        DF_ObjetNavigMous(id,'out');
                }
}
 
 
 
function DF_ObjetDefilant_Off (id)
{
        DF_ObjetNavigMous(id,'over');
}
 
 
 
function DF_ObjetDefilant_On_Off (id)
{
        if(typeof this.DF_ObjetParam[id]['id_defile'] == 'undefined' || (typeof this.DF_ObjetParam[id]['Timer'] == 'number' && this.DF_ObjetParam[id]['Timer'] == 0))
                {
                        DF_ObjetDefilant_On (id);
                }
                else
                {
                        DF_ObjetNavigMous(id,'over');
                }
}
 
 
 
function DF_ObjetDefilant_On_Inverse (id)
{
        if(typeof this.DF_ObjetParam[id]['id_defile'] == 'undefined' || (typeof this.DF_ObjetParam[id]['Timer'] == 'number' && this.DF_ObjetParam[id]['Timer'] == 0))
                {
                        DF_ObjetDefilant_On (id);
                }
                else
                {
                        DF_ObjetSensInverse (id);
                }
}
 
 
 
function DF_ObjetDefilant_Inverse (id)
{
        if(typeof this.DF_ObjetParam[id]['Timer'] == 'number' && this.DF_ObjetParam[id]['Timer'] > 0)
                {
                        DF_ObjetSensInverse (id);
                }
}
 
 
function addLoad_DF_ObjetDefilant(func)
{
        if (window.addEventListener)
                {
                        window.addEventListener("load", func, false);
                }
        else if (document.addEventListener)
                {
                        document.addEventListener("load", func, false);
                }
        else if (window.attachEvent)
                {
                        window.attachEvent("onload", func);
                }
}
-->
</script>
 
<script type="text/javascript">
<!--
addLoad_DF_ObjetDefilant(function(){DF_ObjetDefilant('images_defilant','auto','r','g','10','10','0','1500')});
addLoad_DF_ObjetDefilant(function(){DF_ObjetDefilant('texte_defilant','auto','b','g','15','100','50','250')});
-->
</script>
 
<style type="text/css">
<!--
#cadre_images {
        border: 18px solid #CC0066;
        width:230px;
        height:405px;
        margin: 2em auto 0 auto;
        overflow: hidden;/*pour ie*/
 
}
 
#cadre_texte {
 
        width:260px;
        height:25px;
        border-top: 1px solid #CCCCCC;
        border-bottom: 1px solid #CCCCCC;  
        margin: 2em auto 0 auto;
        padding-top:2px;
        font-family:Arial, Helvetica, sans-serif;
        font-size:16px;
        color: #003399;
        overflow: hidden;/*pour ie*/
 
}
 
#conteneur_defil, #conteneur_defil2 {
        position : relative;
        visibility:hidden;/*pour ie*/
        overflow : hidden;
        height:100%;
}
 
-->
</style>
</head>
 
<body>
 
 <div id="cadre_images">
 
        <div id = "conteneur_defil" >
                <div id="images_defilant"  onmouseover = "DF_ObjetDefilant_Off('images_defilant')"  onmouseout = "DF_ObjetDefilant_On('images_defilant')">
                <img src="http://www.abciweb.net/PHOTO/bimbo.jpg" width="137" height="405" title="Bimbo 1" alt="Bimbo 1" style="margin:0 3em" /><img style = "margin:0 3em"src="http://www.abciweb.net/PHOTO/bimbo2.jpg" width="133" height="400" title="Bimbo 2" alt="Bimbo 2" />
                </div>
        </div>
 </div>
 
 
<div onclick = "DF_ObjetDefilant_Inverse('images_defilant')" style="position:relative;width:40px;margin:auto; cursor:pointer;z-index:10;top:-17px"><img src="http://www.abciweb.net/images_nav/fleche_aller_retour_blanc_fong_rouge.png" width="40"  height="15"  alt="Inversion du sens de défilement" title="Inversion du sens de défilement" />
</div>
 
<div id = "cadre_texte">
        <div id = "conteneur_defil2" onmouseover = "DF_ObjetDefilant_Off('texte_defilant')"  onmouseout = "DF_ObjetDefilant_On('texte_defilant')">
                <div id = "texte_defilant">
                <strong>Exemple avec défilé de bimbos. &nbsp;&nbsp;&nbsp;<a class="liens" href="http://www.abciweb.net/objet-defilant.php">Autres exemples</a> ...</strong>
                </div>
        </div>
</div>
</body>
</html>

Et pour voir rapidement si ça répond à tes besoins (je pense que oui) tu peux regarder par ici

réduire la largeur d'un texte défilant

JavaScript

Vue hybride

Discussions similaires

Partager

Partager