[html][javascript]onMouseOver menu plaatjes

[marty]

Als je een menuutje wil hebben waarbij de knoppen van plaatje veranderen op een onMouseOver dan kom je 1001 manieren tegen om dit te doen. Dat is het probleem dus niet. Maar, wat is nu de beste oplossing in termen van browser-compatabiliteit, snelheid, manier van preloaden, etc.

Uit gewoonte gebruik ik zelf deze:

code:

<script language="javascript" type="text/javascript">
<!--
if (document.images)
{
     // Active images
    img1on      = new Image();
    img1on.src  = '/images/buttons/button1on.gif';
    img2on      = new Image();
    img2on.src  = '/images/buttons/button2on.gif';

     // Inactive images
    img1off     = new Image();
    img1off.src = '/images/buttons/button2off.gif';
    img2off     = new Image();
    img2off.src = '/images/buttons/button2off.gif';
}
function imgOn (imgName) {
    if (document.images) {
        document [imgName].src = eval(imgName + "on.src");
    }
}

function imgOff (imgName) {
    if (document.images) {
        document [imgName].src = eval(imgName + "off.src");
    }
}
</script>


*** en het html gedeelte: ***


<a href="/" onMouseOver="imgOn('img1')" onMouseOut="imgOff('img1')">
    [img]"button1off.gif"[/img]</a><br>
<a href="/" onMouseOver="imgOn('img2')" onMouseOut="imgOff('img2')">
    [img]"nieuwsoff.gif"[/img]</a><br>

(Die heb ik ooit eens in heel veel browsers getest en lijkt het overal goed te doen (wat ik erg belangrijk vind). Klein nadeeltje is dat ie qua performance niet zo geweldig is...)

Wat zijn jullie ideeën hierover?
Bestaat er een 'beste' methode?

[Thijsmans]

mja, dat kan korter

code:

var images = array("plaatje1.gif", "plaatje2.gif");

for(i=0; i<images.length; i++){
   preloadedIMG = new Image();
   preloadedIMG.src = images[i];
}

Zo laadt hij ze allemaal in de cache

code:

[img]"blaat"[/img]

Zo veel manieren zijn er niet btw...

[Bosmonster]

for(i=0; i<images.length; i++){
preloadedIMG = new Image();
preloadedIMG.src = images[i];
}

Ik heb het idee gehad dat dit niet zo werkt, aangezien je nu achter elkaar je eigen plaatjes overschrijft Schrijf ze dan ook weg in een array, dan weet je zeker dat dit niet gebeurt.

[marty]

Prammenhanger schreef op 11 juni 2003 @ 18:03:
Zo veel manieren zijn er niet btw...

Je moest eens weten hoeveel (bende ) ik tegen ben gekomen. Echt van die hele lappen code die wonderbaarlijk genoeg ook nog werken als je ze letterlijk overneemt, maar die een studie van een paar dagen vereisen om de logica er achter te snappen.

Bosmonster schreef op 11 juni 2003 @ 18:21:
[...]
Ik heb het idee gehad dat dit niet zo werkt, aangezien je nu achter elkaar je eigen plaatjes overschrijft Schrijf ze dan ook weg in een array, dan weet je zeker dat dit niet gebeurt.

Zo bedoel je?:

code:

var images = array("plaatje1.gif", "plaatje2.gif");

for(i=0; i<images.length; i++){
   preloadedIMG[i] = new Image();
   preloadedIMG[i].src = images[i];
}

Hmmm... dat heb ik even uitgeprobeerd, maar dat werkt niet. Krijg geen error in de javascript console, maar hij preload ze ook niet. Dit is wat ik heb:

code:

 var preloadedIMG   = new Array();
 var images     = new Array('button1.gif', 'button2.gif');

 for(i=0; i<images.length; i++)
 {
    preloadedIMG[i] = new Image();
    preloadedIMG[i].src = images[i];
 }

[ Voor 19% gewijzigd door marty op 11-06-2003 20:30 ]

[Verwijderd]

Heb je ook een voorbeeld van je site? Lijkt mij ook wel leuk om te gebruiken.