[JS]Het "FadeOut"-en van een celbackground

[Verwijderd]

Ik ben dus voor school nog steeds bezig met een website , welke te bezichtigen is op mijn @home account. Zoals je kunt zien heb ik een OnMouseOver en OnMouseOut bij het menu gebruikt. Dit werkt allemaal wel.

Maar nu wil ik graag dat als ik een OnMouseOut heb, dat de kleur niet direct terugspringt, maar dat het langzaam terug"fade" naar de originele kleur.

afijn , ik heb nu dus dit:

code:

<script language="Javascript" type="text/javascript">
var j
j=0

function fadeout() {
            interval = setInterval('hetlusje()',75)
}

function hetlusje() {
//alert("kuT");
      array = new Array(9)
//de array vullen
      array[0] = "#F98487"
      array[1] = "#F98E90"
      array[2] = "#F99195"
      array[3] = "#FA9A9C"
      array[4] = "#FAA4A6"
      array[5] = "#FAAEAF"
      array[6] = "#FBBCBD"
      array[7] = "#FECBCC"
      menuopt_1.style.backgroundColor = array[j];
      if (j!=7) {
            j=j+1
      }
      else {
            clearInterval(interval);
            j=0
      }
}
</script>

Als ik in het veld kom, blijft ie donker. Ga ik nu uit het veld, dan wordt de functie Fadeout() gelanceerd. Hier loop ik tegen het 1e probleem, nl: als ik op de link kom, dus de test 1-2-3, dan ziet hij dat ook als een onmouseout, en wordt de fadeout ook getriggered, wat dus niet moet. Dan probleem 2: als ik snel onMouseOver en OnMouseOut afwissel komt hij in een oneindige loop... wat ie volgens mij toch wel doet, alleen zie ik het niet..

Ook ben ik tegen het probeem aanlopen dat als ik een mouseout heb getriggerd, en ik binnen de tijd dat de fadeout voorbij is hem weer activeer(doordat ik over het menu ga), de functie overhoop haal, of heb ik het hier mis ( dit zal die loop zijn waar ik het hiervoor over had)

Alleen de eerste van het menu werkt pas met fadeout...

Wie weet wat ik hier aan kan veranderen zodat hij het wél na behoren doet, of misschien dat iemand hier al een goed scriptje voor heeft?

offtopic:
ahum, let niet op de alertbox, das een kleine frustatietest

[ Voor 6% gewijzigd door Verwijderd op 03-04-2003 18:44 ]

[Dark Blue]

code:

<SCRIPT language='javascript'>

    document.write('<STYLE TYPE="text/css">.imgTrans{ filter:revealTrans(duration=0.4,transition=12) }</STYLE>');
    
    var onImages=new Array();
    function Rollover(imgName, imgSrc)
    {
        onImages[imgName] = new Image();
        onImages[imgName].src = imgSrc;
    }
    
    function turnOn(imgName){ 
        if(document.images[imgName].filters != null)
            document.images[imgName].filters[0].apply();
        document.images[imgName].offSrc = document.images[imgName].src;
        document.images[imgName].src    = onImages[imgName].src;
        if(document.images[imgName].filters != null)
            document.images[imgName].filters[0].play();
    }
    
    function turnOff(imgName){ 
        if(document.images[imgName].filters != null)
            document.images[imgName].filters[0].stop();
        document.images[imgName].src = document.images[imgName].offSrc;
    }
    
    //Specify name of participating images, plus paths to their onMouseover replacements:
    Rollover("a",  "gfx/alb_nd.gif");
    Rollover("b",  "gfx/alb_bs.gif");
    Rollover("c",  "gfx/alb_tk.gif");
    Rollover("d",  "gfx/alb_rs.gif");
    Rollover("e",  "gfx/alb_ry.gif");
</SCRIPT>

code:

<a onmouseover="turnOn('a');" onmouseout="turnOff('a');" 
            href="cd_nd.htm" target="main"><img alt="No Doubt"
            class=imgtrans src="gfx/alb_nd_g.gif" border=0 
            name=a></a><br>

Hoop dat je hier wat aan hebt. Effect is te zien op deze pagina....
http://eduvision.nl/wedstrijd/winnaars/ulrich/

Verder weet ik amper wat van Javascript, het werkt bij mij, wil je het script aanpassen... don't ask me

Oh wacht, jij wil het met tekst.... hmm. Sorry misschien heb je hier toch wat aan.

[ Voor 14% gewijzigd door Dark Blue op 03-04-2003 19:40 ]

[Verwijderd]

Dark Blue schreef op 03 April 2003 @ 19:39:

code:

<script>

Hoop dat je hier wat aan hebt. Effect is te zien op deze pagina....
http://eduvision.nl/wedstrijd/winnaars/ulrich/

Verder weet ik amper wat van Javascript, het werkt bij mij, wil je het script aanpassen... don't ask me

Oh wacht, jij wil het met tekst.... hmm. Sorry misschien heb je hier toch wat aan.

Het is inderdaad niet precies wat ik zoek, maar alle beetjes helpen natuurlijk

[RM-rf]

voor DarkBlue: misschien heel vreemd gedacht,
maar waarom geen animated gif maken die maar 1x loop-ed en die onmouseover/out oproepen?

voor de TS:
niet zo'n 'mooie' oplossing, maar plaats geen A href's in de tag, maar plaats een onclick="window.location='blaat.html'" in de TD, is gelijk ook je hele TD gelinkt.
helemaal net is ook dan style="cursor:pointer;cursor:hand;" erin te zetten

[ Voor 54% gewijzigd door RM-rf op 04-04-2003 12:24 ]

[Verwijderd]

Wat jij nodig hebt vind je hier: http://www.javascript-fx.com/

Hoop dat je er wat aan hebt.

[InZane]

Kijk hier eens voor de gein

http://www.golivegroup.co...inglinks/fadinglinks.html

Moet vast wel iets van te maken zijn dacht ik zo..

[ Voor 24% gewijzigd door InZane op 04-04-2003 12:35 ]

[BaRF]

InZane schreef op 04 April 2003 @ 12:32:
Kijk hier eens voor de gein

http://www.golivegroup.co...inglinks/fadinglinks.html

Moet vast wel iets van te maken zijn dacht ik zo..

hey cool bedankt

[Verwijderd]

Hey, allemaal bedankt alvast voor de reakties, ook met die complete cel als link! Ook de sites ga ik nu eens even grondig doorspitten, waar ik wellicht meer te weten kom, en anders leer ik in ieder geval weer bij!

Bedankt!

[André]

Jij plaats de kleuren voorgedefinieerd in een array, maar je kunt ook met de rgb waarden spelen. Die laat je stapsgewijs veranderen naar de kleur die je wil.