Appliquer un chemin de couleur sur un texte entré en paramètre...

0/5 (3 avis)

Snippet vu 4 467 fois - Téléchargée 17 fois

Contenu du snippet

Bonjour
Ce code vous permet de faire un dégrader sur un texte(encore?!), oui mais de plusieurs couleurs. On entre le texte en paramètre, un tableau de couleur de la class Color, le style et un debug pour voir évoluer la fonction.. La fonction écrit directement sur le document.

Source / Exemple :


<script language="javascript" type="text/javascript">
     function Color(arg,ag,ab)
     {
    
     if((typeof(arg)=="number")&&(typeof(ag)=="number")&&(typeof(ab)=="number"))
     {
     this.red = arg;
     this.green = ag;
     this.blue = ab;
     }
     else
     {
     this.red = 0;
     this.green = 0;
     this.blue = 0;
     }
     }
     function d2h(d)
     {
     if ((d<16)&&(0<=d)) return "0" + d.toString(16);
     else return d.toString(16);
     }
    
     function h2d(h) {return parseInt(h,16);}
    
 function	ColorString(texte,tColors,style,fdebug) 
	{
		var  out = "";
		var sout="";
		debug = function  (idebug)
		{//alert("texte.length" + texte.length)
			switch(idebug)
			{
				case 0:sout="texte.length" + texte.length;break;
				case 1:sout+="\ndColor:" + dColor;break;
				case 2:sout+="<br>Nbre de lettre par partie : " +nbLettrepPartie;break;
				case 3:sout+="if(!(dColor * iColor < Lettre))<br>";break;
				case 4:sout="<br>vrai ou faux??";;break;
				case 5:sout+=dColor + "*" + iColor + "<=" + Lettre;break;
				case 6:sout+="\nicolor++\n";;break;
				case 7:sout+="iLettre:"+iLettre+"\tColor :"+TheColor+" \tLettre:'"+texte.charAt(Lettre)+"'\n";break;
				case 8:document.write(sout);
				case 9:sout+="\n" + dColor * iColor + "<" + Lettre
				default:sout+="null"; break;
			}
		}
		
		nbLettrepPartie = texte.length/(tColors.length-1);
		if(fdebug) debug(0);
		dColor = texte.length / (tColors.length-1); 
		if(fdebug)debug(1);
		if(fdebug)debug(2);
		if (dColor<1) dColor = 1;
		var iColor = 0;
		if(fdebug){debug(3);debug(8);}
		iLettre = 0;
		for(var Lettre = 0; Lettre<texte.length;Lettre++)// Parcours et écriture de toute les lettres
		{   if(fdebug){debug(4);debug(5);debug(9);}

			if(dColor * iColor <= Lettre)
			{	iLettre = 0;
				iColor++;
				if(fdebug)debug(6);
				dr = ( tColors[iColor].red   - tColors[iColor-1].red   ) / nbLettrepPartie;
				dg = ( tColors[iColor].green - tColors[iColor-1].green ) / nbLettrepPartie;
				db = ( tColors[iColor].blue  - tColors[iColor-1].blue  ) / nbLettrepPartie;
			}
			
			TheColor = "#" + d2h(Math.round(tColors[iColor-1].red + iLettre * dr)) +d2h(Math.round(tColors[iColor-1].green + iLettre * dg)) + d2h(Math.round(tColors[iColor-1].blue + iLettre * db))
			if(fdebug){debug(7);debug(8);}
			out+='<font '+style+' color="' + TheColor + '">' + texte.charAt(Lettre) + '</font>';
			
			iLettre++;
		}
		document.write(out);
	}
    
     var tColors = [new Color(00,00,255),new Color(255,255,255),new Color(255,0,0)]
     ColorString("0123456789abcdefghijklmnopqrstuvwxyz0123456789abcdefghijklmnopqrstuvwxyz",tColors,"",1);
     </script>

A voir également

Ajouter un commentaire Commentaires
nicomilville Messages postés 3472 Date d'inscription lundi 16 juillet 2007 Statut Membre Dernière intervention 28 février 2014 36
13 juin 2008 à 16:33
Oui, ce serait un plus !

a++
LeFauve42 Messages postés 239 Date d'inscription vendredi 20 octobre 2006 Statut Membre Dernière intervention 20 avril 2009
13 juin 2008 à 11:49
Une petite copie d'ecran peut-etre ?
nicomilville Messages postés 3472 Date d'inscription lundi 16 juillet 2007 Statut Membre Dernière intervention 28 février 2014 36
4 juin 2008 à 19:57
oui, pas mal, je regarderai plus en détail quand j'aurai le temps...

a++

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.