WN

WN (https://www.wn.se/forum/index.php)
-   Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)
-   -   text med 3 olika färgövergångar? (https://www.wn.se/forum/showthread.php?t=16713)

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.


Alla tider är GMT +2. Klockan är nu 22:47.

Programvara från: vBulletin® Version 3.8.2
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
Svensk översättning av: Anders Pettersson