Faire defiler les couleurs d'un texte

Version imprimable

Bonjour a tous,

Voici ce que je cherche a faire sur une page web:

1- Afficher un texte multicolore dont les couleurs defilent.

2- Faire en sorte que ce texte soit un lien.

Le 1- est pour attirer l'attention du visiteur. Apres l'avoir imaginer, je me suis rappele que dans le jeu Final Fantasy VII, ils utilisent le meme effet:

Si vous voulez un apercu de ce que je veux faire, regardez a la 23 eme seconde de cette video, le mot "Limit":
http://video.google.com/videoplay?do...8341556477134#

Je me suis base sur cet article et cet article pour ecrire ceci:
Code:

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 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <HEAD> </HEAD> <BODY onload="TimeDegrade(200,0,120,0,0,100,'Un exemple de texte dégradé multicolore !',1)"> <SCRIPT LANGUAGE="JavaScript"> var hexa = "0123465789ABCDEF"; var date = new Date(); var T = date.getTime(); function DecToHexa(DecNb) { x = Math.floor(DecNb / 16); h = hexa.charAt(x); x = DecNb % 16; h += hexa.charAt(x); return h; } function Degrade(dr,dg,db,fr,fg,fb,texte) { content=""; steps = texte.length; cr = dr; cg = dg; cb = db; sr = (fr - dr) / steps; sg = (fg - dg) / steps; sb = (fb - db) / steps; for (var x = 0; x <= steps; x++) { content += "<FONT COLOR='#" + DecToHexa(cr) + DecToHexa(cg) + DecToHexa(cb) +"'>"; content +=texte.charAt(x); content +="</FONT>"; cr += sr; cg += sg; cb += sb; } tdegrade1.innerHTML=content; } function TimeDegrade(dr,dg,db,fr,fg,fb,texte,k) { t = k*T; Degrade(dr+t%256,dg+t%256,db+t%256,fr+t%256,fg+t%256,fb+t%256,texte); setTimeout("TimeDegrade("+dr+","+dg+","+db+","+fr+","+fg+","+fb+","+texte+","+k+")", 2); } </SCRIPT> <br><br><br><br><br><br><br> <div id="tdegrade1"> </div> </BODY> </HTML>
Mais cela ne fonctionne pas, le texte ne change pas de couleur, et en plus (la je ne comprend vraiment pas) les couleurs ne se suivent pas, alors que si on met t=0 au lieu de t=k*T, on a des couleurs fixes, mais qui grraduent correctement.

alors pour le 1-, j'aimerais avoir une solution pour que les couleurs changent, mais pas n'importe comment, on devrait voir comme un defilement de gauche a droite.

Pour le 2-, imaginons que le 1- fonctionne, je ne sais pas comment changer le style CSS des liens non visites/deja visites pour que le defilement de couleur fonctionne encore.
Peut etre que pour avoir le 2- et le 1-, je devrait proceder autrement en creant un style CSS bien speciale, mais la aussi je suis perdu.

Merci d'avance pour votre aide.

09/03/2010, 19h34
Ethyde

Bonjour,

a mon avis tu auras plus de réponse si un gentil modérateur déplace ton post dans la rubrique Javascript ;)

A l'arrache un truc comme ça

Code:

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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
<script type='text/javascript'>
var rainbow=new Array('red','orange','yellow','green','blue','indigo','violet');
var step=0
function arcenciel(chaine){
tabchaine=chaine.split('')
var i=0
var arc=document.createElement('div')
while(tabchaine[i++]){
	var lettre=document.createElement('span')
	lettre.innerHTML=(tabchaine[i-1]==" ")?"&nbsp;":tabchaine[i-1];
	lettre.id='lettre'+(i-1)
	arc.appendChild(lettre)
	}
document.body.appendChild(arc)
var irise=setInterval (function(){colorise(tabchaine.length)},100)
}
 
 
function colorise(long){
temp=step
 
for (i=0;i<long; i++){
   couleur=(long+temp-i) % 7
   document.getElementById('lettre'+i).style.color=rainbow[couleur]
   }
   step++
   }
</script >
<style type="text/css">
body {background-color: silver;}
</style>
 
</head>
 
<body onload="arcenciel('un texte entier qui brille comme un arc en ciel')">
 
</body>
 
</html>

11/03/2010, 14h27
FoX_*D i E*

ok j'ai essayer de comprendre ce script un peu plus tard parce que y a des choses que je veux modifier et le javascript c pas evident pour moi. par exemple, c'est quoi le

Code:

setInterval (function(){colorise(tabchaine.length)},100)

la fonction et son argument, pourquoi ce function() ?

Ensuite chers webmasters, avez-vous une idees pour que les liens aient cet effet?
11/03/2010, 14h39
SpaceFrog

pourquoi function ?
tout simplement parceque setINterval attend en paramètre une fonction, sinon il est obligé d'évaluer un string ...

Pour ce qui est de l'appliquer aux liens ...
il suffirait de mettre une class specifique aux textes concenés et les remplacer par le code généré par ce script ...

http://danielhagnoul.developpez.com/...s/LasVegas.php
11/03/2010, 16h15
FoX_*D i E*

ok, j'ai trouve, sinon j'entoure le texte de

Code:

<u style="cursor:pointer;" onclick="location.href='http://...'"><DIV DU TEXTE MULTICOLOR></u></h2>

Merci pour le lien, j'vais m'en inspire du coup

RESOLU