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>

Lindahl · 2006-10-08, 12:00

Dela strängen på mitten, kör ditt script en gång på första delen, och en gång på andra delen. Klart.

Men vad var det för fel på din förra tråd?

zilveer · 2006-10-08, 13:40

lindahl:
saken är den att jag vill kunna välja en 3:e färg i detta.
om jag delar strängen på mitten, kör scriptet en gång på första delen, och en gång på andra delen. så kan jag ju inte välja en 3:e färg?

säg till om jag missat ngt.

/tack för vägledning

koala · 2006-10-08, 15:22

Du har missat något!

Sträng: "Jag har missat väldigt mycket!"

Dela upp till: "Jag har missat" och "väldigt mycket!".

Gör följande gradient:

GRÖN "Jag har missat" RÖD

RÖD "väldigt mycket!" SVART

zilveer · 2006-10-09, 01:29

vad menar du?

Citat:

Originally posted by koala@Oct 8 2006, 15:22
Du har missat något
Sträng: Jag har missat väldigt mycket
Dela upp till: Jag har missat och väldigt mycket.
Gör följande gradient:
GRÖN Jag har missat RÖD
RÖD väldigt mycket SVART

koala · 2006-10-09, 05:00

Jag menar precis det jag skrev... är det så svårt att förstå? Ska jag kanske skriva ut koden åt dig också?

zilveer · 2006-10-09, 11:43

hej,
tack så mycket. jag skulle verkligen uppkskatta det om du kunde skriva koden också.

/mvh zilveer

Citat:

Originally posted by koala@Oct 9 2006, 05:00
Jag menar precis det jag skrev... är det så svårt att förstå? Ska jag kanske skriva ut koden åt dig också?

allstars · 2006-10-09, 12:35

GRÖN Jag har missat RÖD
RÖD väldigt mycket SVART

<span id="no1">Jag har missat</span> <span id="no2">väldigt mycket </span>

<script type="text/javascript">

makeItPretty('no1','339900','FF0000');
makeItPretty('no2','FF0000','000000');
</script>

zilveer · 2006-10-09, 16:48

hej,
tack för svar..jag förstår att jag kan göra på det sättet.
dock skulle jag vilja anropa till funktionen med 3 färg-argument

Kod:

makeItPretty('no2','FF0000','000000', 'FF0000');

tack för hjälp

grazzy · 2006-10-18, 23:03

makeItPretty('no2','FF0000','000000', 'FF0000'); Haha, skojar du eller?

Gör två spans av texten istället, och kör FF0000 på den första till 000000 och 00000 till FF0000 på den andra..

Eller gör om koden.. hur svårt är det. Eller varför inte betala nån för att göra det.

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?