demande aide pour liens defilants dhtml/javascript

**fullmetaljibz** · 31/05/2007, 10h54

Bonjours, j'ai trouvé sur le net un script permettant d'insérer sur mon site web des liens défilants de bas en haut. Ces liens défilent un par un (quand un disparait, l'autre apparait en bas...). J'aurais voulus savoir s'il était possible de "resserer" les liens, c'est à dire qu'ils défilent continuellement mais avec juste une ligne ou deux d'ecart entre eux.

J'aurais aussi une autre question: quand on clique sur un lien, le défillement est stoppé, il faut actualiser. Serait il possible de ne pas casser le defilement?

Voici le script (désolé si c'est un peu long) :

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
 
<html>
<body>
<code>
<style type="text/css">
<!-- 
.textanimlink,a {
text-decoration : none;
}
P.main {
        font-family : Arial;
        font-size : 15pt;
        font-weight : bold;
}
-->
</style>
 
<script language="javascript">
<!--
/* Script created by Lefteris Haritou (lef@the.forthnet.gr)*/
bname=navigator.appName;
bversion=parseInt(navigator.appVersion)
if ((bname=="Netscape" && bversion>=4) || (bname=="Microsoft Internet Explorer" && bversion>=4))
window.onload=start
else
stop();
window.onunload=stop
if (bname=="Netscape"){
brows=true
dt=2
}
else{
brows=false
dt=20
}
var z=0;
var msg=0;
var rgb=0;
var link=false;
var status=true;
var updwn=false;
var message= new Array();
var value=0;
var h=window.innerHeight;
var w=window.innerWidth;
var timer1;
var timer2;
var timer3;
var convert = new Array()
var hexbase= new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F");
 
// Votre texte ici ! ****************************************
var bgcolor="#FFFFFF"; //Couleur de l'arrière-plan
var color="#00008D";  //Couleur des lettres
 
message[0]='<a href="http://URL 1" target="_blank">Description 1</a>'
message[1]='<a href="http://URL 2" target="_blank">Description 2</a>'
message[2]='<a href="http://URL 3" target="_blank">Description 3</a>'
message[3]='<a href="http://URL 4" target="_blank">Description 4</a>'
 
// Ajoutez autant de lignes que vous souhaitez 
// ***************************************************
 
for (x=0; x<16; x++){
for (y=0; y<16; y++){
convert[value]= hexbase[x] + hexbase[y];
value++;
}
}
 
redx=color.substring(1,3);
greenx=color.substring(3,5);
bluex=color.substring(5,7);
hred=eval(parseInt(redx,16));
hgreen=eval(parseInt(greenx,16));
hblue=eval(parseInt(bluex,16));
eredx=bgcolor.substring(1,3);
egreenx=bgcolor.substring(3,5);
ebluex=bgcolor.substring(5,7);
ered=eval(parseInt(eredx,16));
egreen=eval(parseInt(egreenx,16));
eblue=eval(parseInt(ebluex,16));
red=ered;
green=egreen;
blue=eblue;
 
function start(){
if ((bname=="Netscape" && bversion>=4) || (bname=="Microsoft Internet Explorer" && bversion>=4)){
link=false;
updwn=true;
if (brows)
res=document.layers['textanim'].top
else{
textanim.style.width=document.body.offsetWidth-20;
textanim.innerHTML='<Pre><P Class="main" Align="Center">'+message[msg]+'</P></Pre>'
res=textanim.style.top
for (x=0; x<document.all.length; x++)
if(document.all[x].id=="textanimlink")
link=true;
}
up()
}
}
 
function stop(){
clearTimeout(timer1);
clearTimeout(timer2);
clearTimeout(timer3);
}
 
function resz(){
h=window.innerHeight;
w=window.innerWidth;
if (updwn)
timer1=setTimeout('up()',1000)
else
timer2=setTimeout('down()',1000)
}
 
function breakf(){
if (status){
clearTimeout(timer1);
clearTimeout(timer2);
status=false
return;
}
else{
status=true;
if (updwn)
timer1=setTimeout('up()',dt)
else
timer2=setTimeout('down()',dt)
}
}
 
function up(){
if (red<hred){
if ((red+7)<hred)
red+=7;
else
red=hred
redx = convert[red]
}
else{
if ((red-7)>hred)
red-=7;
else
red=hred
redx = convert[red]
}
 
if (green<hgreen){
if ((green+7)<hgreen)
green+=7;
else
green=hgreen
greenx = convert[green]
}
else{
if ((green-7)>hgreen)
green-=7;
else
green=hgreen
greenx = convert[green]
}
 
if (blue<hblue){
if ((blue+7)<hblue)
blue+=7;
else
blue=hblue
bluex = convert[blue]
}
else{
if ((blue-7)>hblue)
blue-=7;
else
blue=hblue
bluex = convert[blue]
}
 
rgb = "#"+redx+greenx+bluex;
if (brows){
document.layers['textanim'].document.linkColor=rgb;
document.layers['textanim'].document.vlinkColor=rgb;
if (window.innerHeight!=h || window.innerWidth!=w){
clearTimeout(timer1);
resz()
return;
}
else{
document.layers['textanim'].document.write('<Pre><P Class="main" Align="Center"><font color="'+rgb+'">'+message[msg]+'</font></P></Pre>')
document.layers['textanim'].document.close();
}
}
else{
textanim.style.color=rgb;
if(link)
textanimlink.style.color=rgb;
}
if (z<38){
if (brows)
document.layers['textanim'].top--
else
textanim.style.posTop--
z++
timer1=setTimeout('up()',dt)
}
else
{
updwn=false;
down()
}
}
 
function down(){
if (red<ered){
if ((red+7)<ered)
red+=7;
else
red=ered
redx = convert[red]
}
else{
if ((red-7)>ered)
red-=7;
else
red=ered
redx = convert[red]
}
 
if (green<egreen){
if ((green+7)<egreen)
green+=7;
else
green=egreen
greenx = convert[green]
}
else{
if ((green-7)>egreen)
green-=7;
else
green=egreen
greenx = convert[green]
}
 
if (blue<eblue){
if ((blue+7)<eblue)
blue+=7;
else
blue=eblue
bluex = convert[blue]
}
else{
if ((blue-7)>eblue)
blue-=7;
else
blue=eblue
bluex = convert[blue]
}
 
rgb = "#"+redx+greenx+bluex;
if (brows){
document.layers['textanim'].document.linkColor=rgb;
document.layers['textanim'].document.vlinkColor=rgb;
if (window.innerHeight!=h || window.innerWidth!=w){
clearTimeout(timer2);
resz()
return;
}
else{
document.layers['textanim'].document.write('<Pre><P Class="main" Align="Center"><font color="'+rgb+'">'+message[msg]+'</font></P></Pre>')
document.layers['textanim'].document.close();
}
}
else{
textanim.style.color=rgb;
if(link)
textanimlink.style.color=rgb;
}
 
if (z<76){
if (brows)
document.layers['textanim'].top--
else
textanim.style.posTop--
z++
timer2=setTimeout('down()',dt)
}
else
{
if (brows){
document.layers['textanim'].document.write('')
document.layers['textanim'].document.close();
}
else
textanim.innerHTML='';
window.clearInterval(timer2);
if(msg<message.length-1){
msg++;
z=0;
if (brows){
document.layers['textanim'].top=res;
}
else
textanim.style.top=res;
timer3=setTimeout('start()',100);
}
else
{
msg=0;
z=0;
if (brows)
document.layers['textanim'].top=res;
else
textanim.style.top=res;
timer3=setTimeout('start()',2000);
}
}
}
//  -->
</script>
<Div id="textanim" style="position: absolute; left: 0; top: 80" onclick="breakf()"></Div>
<Layer name="textanim" left=0 top=80></Layer>
</body>
</html>

**Deallyra** · 31/05/2007, 11h00

Trois choses en parcourant ton code

1_Tu n'utilises pas la balises [code ] [/code ]
2_Tu n'incrémentes pas
3_Tu fermes un body après un HTML

Corriges ça en éditant et on verra ensuite

**chaminette** · 31/05/2007, 11h03

Ya une balise HTML qui fait ça !
Qui s'appelle <marquee > si ma mémoire est bonne !

**jmulans** · 31/05/2007, 11h06

Envoyé par chaminette

Ya une balise HTML qui fait ça !
Qui s'appelle <marquee > si ma mémoire est bonne !

http://www.csvt.qc.ca/patriotes/html...c/xmpl_mrq.htm

**Deallyra** · 31/05/2007, 11h07

oui la balise marquee permet de faire défiler des textes...

avec ce code par exemple:

Code :

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

1
2
 
<marquee behavior = "scroll" direction = "left" scrollamount = "4" scrolldelay = "0" onmouseover = "this.stop()" onmouseout = "this.start()">

mais bon...
Ce serait mieux qu'il comprenne par rapport à son code si c'est possible et donc il faut qu'il soit lisible pour nous.

**fullmetaljibz** · 31/05/2007, 11h31

Pour la balise <marquee>, on est obligé d'avoir une fenêtre autour non?
Parseque sur mon site, les liens défilent juste avec rien autour.
Mais si vous avez des solutions mieux que la mienne je suis prenneur quand même.

**Deallyra** · 31/05/2007, 12h10

une fenêtre autour? Qu'entends tu par là?

**fullmetaljibz** · 31/05/2007, 12h24

Ah! Non j'suis bête on peut enlever le font coloré. Désolé j'ai dit n'importe quoi.
Mais est ce qu'avec la balise marquee on peut choisir où placer le texte sur la page? Par défault il se place au milieu de mon site web.

**Deallyra** · 31/05/2007, 12h51

et moi je dit :
Vive le pouvoir des DIVs

**fullmetaljibz** · 31/05/2007, 15h04

Merci, vous m'aidez beaucoup (je suis pas très fort en prog désolé).
J'ai donc incorporé ce code à la place de l'autre, mais à vitesse lente, c'est très saccadé. Savez-vous si on peut rendre le defilement plus "coulant".

Voici ce que j'ai fait:

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
<div id="Layer5" style="position:absolute; width:200px; height:115px; z-index:10; left: 216px; top: 270px;">
  <div align="left">
 
<style type="text/css">
<!-- 
.textanimlink,a {
text-decoration : none;
}
P.main {
        font-family : Arial;
        font-size : 10pt;
        font-weight : bold;
}
-->
  </style>
 
<BODY BGCOLOR="white" TEXT="black">
<MARQUEE DIRECTION="up" bgcolor="" width="150%" Height="60" Scrolldelay="200">
<CENTER><FONT COLOR="black" SIZE="3"><B>
<a href="http://URL 1" target="_blank"></a><br/> <br/>
<a href="http://URL 2 target="_blank"></a><br/> <br/>
<a href="http://URL 3" target="_blank"></a><br/> <br/>
<a href="http://URL 4" target="_blank"></a><br/> <br/>
</B></FONT></CENTER>
</MARQUEE>

**chaminette** · 31/05/2007, 15h25

Normalement tu peux regler la vitesse de la balise marquee !
CF

**Deallyra** · 31/05/2007, 15h40

oui on peut mais j'ai réglé à une "bonne" vitesse... Plus c'est trop rapide, moins c'est trop long... Enfin je faissais défiler sur 90% de la largeur d'un écran 15'

**fullmetaljibz** · 31/05/2007, 17h24

Sa y est j'ai réglé le scrollamount sur 1. En fait j'utilisait le scrolldelay pour régler la vitesse. Merci je vous aime c'est parfait

bizous bizous bizous.

demande aide pour liens defilants dhtml/javascript

HTML

Vue hybride

Discussions similaires

Partager

Partager