Artikelen > Erik > Snelle css rollovers
Het maken van zogenaamde "rollover" effecten in de browser gaat heel gemakkelijk met behulp van (x)html en css. Het effect bestaat uit een of meerdere afbeeldingen die geladen worden zodra de gebruiker met de muis over een html element beweegt. De onderstaande link(de afbeelding) is een voorbeeld van dit effect.
De (x)html van deze link:
<a href="#" id="voorbeeld1"></a>
De bijbehorende css:
a#voorbeeld1{ display: block; width: 82px; height: 82px; background: url(normal.gif) no-repeat 0 0; }
a#voorbeeld1:hover{ background-image: url(hover.gif); }
De eerste keer dat men de cursor over de link beweegt, treedt er echter een probleem op. Er is een korte periode waarin er geen achtergrond afbeelding getoond wordt. De link flikkert als het ware.
Wat is hier aan de hand?
Tijdens het laden van de pagina haalt de browser alleen de afbeeldingen op die op dat moment nodig zijn om de pagina correct weer te geven. De afbeelding voor het rollover effect wordt dus niet gedownload. Pas nadat de gebruiker met de muis over de link beweegt komt de browser in actie en downloadt de afbeelding van de server. Alhoewel dit downloaden meestal heel snel gaat, zorgt dit toch voor een merkbare vertraging en is er heel even geen achtergrond afbeelding te zien. De tweede keer dat men de cursor over de link beweegt treedt er geen vertraging meer op omdat de afbeelding nu uit de browser cache wordt gehaald.
Een oplossing
Grafische editors voor het maken van webpagina's lossen dit probleem meestal op dmv javascript. Bijvoorbeeld door het plaatsen van het volgende script in de HEAD sectie van een (x)html document:
<script type="text/javascript">
//<![CDATA[
if(document.images)
{
var afbeelding_1 = new Image();
afbeelding_1.src = "hover.gif";
}
//]]>
</script>
In dit script wordt eerst gecontroleerd op de aanwezigheid van het document.images object. Daarna wordt een nieuw Image object aangemaakt met de url van de rollover afbeelding als bron. Zodra de browser dit script "leest" wordt de afbeelding gedownload en bewaard in de cache. Als de gebruiker de muis cursor nu over de link beweegt wordt de rollover afbeelding direct uit de cache opgehaald en is er dus geen merkbare vertraging.
Een eenvoudigere oplossing
Het probleem kan echter ook puur in css opgelost worden. De truuk is om van alle losse afbeeldingen één afbeelding te maken. In dit geval maakt men dus van deze twee afbeeldingen:
 |  | De volgende afbeelding: |  |
| 82 x 82 pixels | 82 x 82 pixels | | 164 x 82 pixels |
De (x)html van de link hoeft niet aangepast te worden en blijft gewoon:
<a href="#" id="voorbeeld2"></a>
De css wordt nu:
a#voorbeeld2{ display: block; width: 82px; height: 82px; background: url(normal_hover.gif) no-repeat 0 0; }
a#voorbeeld2:hover{ background-position: -82px 0; }
Zodra de gebruiker nu met de cursor over de link beweegt wordt de positie van de achtergrond afbeelding van de link 82 pixels naar links verschoven op de volgende manier:
Voor de ideale oplossing hoeven we dus maar twee acties te ondernemen.
- Maak van de losse afbeeldingen één grote afbeelding.
- Verander de positie van de afbeelding mbv css.
Het eindresultaat
(Leeg de browser cache om het verschil tussen deze rollover en de rollover boven aan de pagina te zien.)
Opmerkingen, suggesties? Geef uw reactie. Wij behouden ons het recht niet ter zake doende reacties te verwijderen.