Ik kom nog best veel websites tegen waar mouseover images in bijv. menu’s door middel van javascript gezet worden.
Ik kan me voorstellen dat dit gedaan wordt omdat je op die manier images kunt preloaden en dus geen knipper effect
krijgt wanneer een bezoeker voor de eerste keer over de button heen gaat. Dit kun je echter ook met css oplossen.
Over css
Feit is en blijft dat je met css geen images kunt preloaden. Je kan er wel op een andere manier voor zorgen dat
images niet moeten laden op het moment dat de mouseover aangeroepen wordt. Ik zal dit aan de hand van enkele
voorbeelden uit gaan leggen.

De afbeeldingen
Voor een mouseover gebruik je meestal 2 afbeeldingen, de knop en de mouseover van de knop.
Ik heb even 2 simpele afbeeldingen gemaakt die de knop en de mouseover voor moeten stellen.

Op de oude manier zou je dus de volgende html/css kunnen gebruiken:

<a href="#" class="button">Button</a>

[CSS]

a.button {
background: url('link naar de button');
text-indent: -9999px;
}
a.button:hover {
background: url('link naar mouseover button');
}

Op deze manier werkt het gewoon goed, alleen het nadeel is dus dat het mouseoverplaatje pas ingeladen
wordt op het moment dat iemand met zijn muis over de a href gaat (hierdoor onstaat dus het knipper effect).

De oplossing
We maken van de button en de mouseover 1 afbeelding.
In deze afbeelding gaan we bovenaan de normale button zetten en onderaan de mouseover button. Je krijgt dan
ongeveer zoiets als hieronder:

de html die we al gebruikte kan hetzelfde blijven, de css passen we iets aan:

[CSS]

a.button {
width: 54px;
height: 23px;
background: url('link naar de afbeelding') 0 0 no-repeat;
overflow: hidden;
text-indent: -9999px;
}

a.button:hover {
background-position: 0 100%;
}

Op deze manier is dus al meteen de button en de mouseover ingeladen. Op het moment dat de mouseover
aangeroepen wordt schuiven de afbeelding dus alleen maar naar beneden. waardoor je de mouseover ziet.

Conclusie
Het preloaden van afbeeldingen in css kan ECHT NIET! Maar… we kunnen het effect van het preloaden
wel simuleren.
De voordelen van deze mouseovers zijn :

• Schonere html code
• Google kan de code beter behandelen
• Html en opmaak blijven gescheiden