text med 3 olika färgövergångar?

zilveer · 2006-10-08, 03:21

hejsan,
jag har en text som jag skulle vilja färgsätta mellan 3 olika färger. så att det finns 3 färg-övergångar i textten.
jag har en kod där man kan fixa färgövergångar mellan 2 olika färger, dock skulle jag vilja ha färgövergångar mellan 3 olika färger.

tacksam för vägledning

Kod:

<html>
<head>
<script type="text/javascript">

/*
id: vilken span
fromcolor: från färg
tocolor: till färg

vad görs? den replacar din ursprungliga span med en ny span för 
varje bokstav och sätter bokstaven i fråga till en gradientad färg.

*/

function makeItPretty(id,fromcolor,tocolor) {
ref = document.getElementById(id);
str = ref.firstChild.nodeValue;

fromred = parseInt("0x" + fromcolor.substr(0,2));
fromgreen = parseInt("0x" + fromcolor.substr(2,2));
fromblue = parseInt("0x" + fromcolor.substr(4,2));

tored = parseInt("0x" + tocolor.substr(0,2));
togreen = parseInt("0x" + tocolor.substr(2,2));
toblue = parseInt("0x" + tocolor.substr(4,2));

diffred = (fromred - tored) / str.length;
diffgreen = (fromgreen - togreen) / str.length;
diffblue = (fromblue - toblue) / str.length;


/* rensa bort den gamla strängen */
ref.removeChild(ref.firstChild);

/* loopa igenom texten som fanns i span'en */
for (i=0;i<str.length;i++) {
 tspan = document.createElement('span');
 tspan.appendChild(document.createTextNode(str.substr(i,1)));
 j = i+1; // trick för off by one
 tspan.style.color = 'rgb('+parseInt(fromred-diffred*j)+','+parseInt(fromgreen-diffgreen*j)+','+parseInt(fromblue-diffblue*j)+')';
 ref.appendChild(tspan);
}
}
</script>
</head>
<body onload="makeItPretty('colorise','ffaaaa','aaaaaa');">
<span id="colorise">hejhopp</span>
</body>
</html>

Aktiva användare som för närvarande tittar på det här ämnet: 1 (0 medlemmar och 1 gäster)

Menu

text med 3 olika färgövergångar?