Het preload probleem bij de CSS mouseover background image swap
In CSS kun je in principe door n.a.v. een mouseover van background image te wisselen, een mouseover button genereren die qua werking vergelijkbaar is met de 'doorsnee' javascript mouseover button. De 'doorsnee' javascript mouseover button wisselt tussen twee image bestanden n.a.v. een onmouseover of onmouseout event (Een voorbeeld van zo'n javascript mouseover button vindt je in het artikel 'onmouseover onmouseout').
Het ontbreekt CSS code echter aan iets dat voor de soepel werkende javascript mousover button onmisbaar is : de mogelijkheid om het tweede image bestand te 'preloaden'. In Javascript preload je een image bestand door in de header van de pagina een new image object te definiëren:
image1 = new Image
image1.src = 'mouseover.jpg'
In CSS is het echter niet mogelijk op deze manier een background-image te 'preloaden'.
Indien je het tweede image-bestand niet 'preload', dan laadt de browser deze pas wanneer de mouseover button door een mouseover event geactiveerd wordt. Bij een eerste mouseover event zal er een pauze zijn tussen het verdwijnen van het oorspronkelijke button plaatje en het verschijnen van het tweede button plaatje. De lengte van deze pauze in het mouseover effect is afhankelijk van download snelheid en het aantal kilobytes dat het image bestand beslaat.
Met meerdere javascript of CSS mouseover buttons op een webpagina is dit geen gezicht.
