text med olika färger

zilveer · 2006-09-26, 02:53

hejsan,
jag har en text som jag skulle vilja färgsätta mellan 2 olika färger.
man ska kunna skriva in den hexadecimala färgkoden för både färgerna, beroende på hur många tecken texten innehåller så skall färgen fördelas mellan dessa så man får en fin övergång mellan färgerna.
kan man lösa detta i php och java?

jag bifogar med en bild så ni kan se vad jag menar.

tacksam för vägledning

mazada · 2006-09-26, 03:37

kolla källkoden på denna sidan
http://www.javascript-fx.com/post/co...de/fader4.html

grazzy · 2006-09-26, 04:03

Du, här på forumet kör vi med spoonfeeding :P

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>

Ses på http://hem.mjoelkbar.net/colorise.html

Alldeles lagom att leka med innan sängen kallar.

zilveer · 2006-09-26, 04:03

ok tack

zilveer · 2006-09-28, 06:58

Fungerar klockrent,
Men jag föredrar
http://www.javascript-fx.com/post/co...de/fader3.html
Då jag kan ha flertexter i html taggen utan att ladda de i <body>.

hurr skulle man kunna fade mellan 3 olika färger på denna då?

Hur kommer koden se ut då? Är tyvärr ej så bra på JS.

tack för vägledning

phict · 2006-10-02, 22:13

kolla bara så de funkar i alla browsers, vissa libs är bara gjorda för ie, bara en notering.

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

Menu

text med olika färger