CSS gfx hovers
Bekijk de online voorbeelden
Hover effecten met plaatjes worden vaak verkeerd geimplementeerd in CSS. In deze tutorial vertel ik wat de goede manier is.
Stel, je hebt een plaatje in je pagina dat je wilt laten veranderen als je bezoeker er met de muis overheen gaat. De gangbare techniek is, dat je het normale plaatje op de a:link en de a:visited zet.
Code (php)
1
2
2
a:link,
a:visited {background: url(normal.jpg) left top no-repeat;}
a:visited {background: url(normal.jpg) left top no-repeat;}
Op de a:hover en a:active komt dan het hover-plaatje te staan:
Code (php)
1
2
2
a:hover,
a:active {background: url(hover.jpg) left top no-repeat;}
a:active {background: url(hover.jpg) left top no-repeat;}
Ja, nou en? Wat is daar fout aan?
Glad you asked! Als je het doet zoals hierboven beschreven, zal het plaatje pas door de browser geladen worden op het moment dat je hovert, dus niet al bij het laden van de pagina. Dat geeft dus een schokkerig effect bij de allereerste keer dat je bezoeker over het plaatje hovert. Daarna haalt je browser het plaatje uit de cache en is het effect verdwenen. Hieronder een voorbeeld van een plaatje met een verkeerde hover-implementatie. (zie hiervoor het online voorbeeld)
Hoe moet het dan wel?
De strategie is als volgt: maak een container-div en geef die dezelfde afmetingen als je plaatje. Geef deze container-div als achtergrondplaatje het hover plaatje. Binnen deze container div zet je de a tag. Geef deze a tag een display: block en dezelfde hoogte en breedte als het plaatje. Geef de a:link en a:visited pseudoclasses als achtergrondplaatje het normale plaatje. Nu komt de truc: op a:hover en a:active zetten we de background op none, waardoor het achtergrondplaatje van de container div zichtbaar wordt.
De CSS:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
div#link02_container {width: 200px; height: 121px; background: url(aurora_hi.jpg) left top no-repeat;}
a#link02 {display: block; width: 200px; height: 121px; background: #fc0; text-decoration: none; text-align: center; text-indent: -2000px;}
a#link02:link,
a#link02:visited {background: url(aurora_lo.jpg) left top no-repeat;}
a#link02:hover,
a#link02:active {background: none;}
a#link02 {display: block; width: 200px; height: 121px; background: #fc0; text-decoration: none; text-align: center; text-indent: -2000px;}
a#link02:link,
a#link02:visited {background: url(aurora_lo.jpg) left top no-repeat;}
a#link02:hover,
a#link02:active {background: none;}
Op het moment dat de bezoeker met de muis over het plaatje gaat, wordt de achtergrond van je a tag op none gezet en zie je het achtergrondplaatje van de container div. Beide plaatjes worden geladen op het moment dat de pagina geladen wordt en zijn op het moment van hoveren dus al beschikbaar. Zie het voorbeeld hieronder. (again: zie voorbeeld online)
That's all folks!
Geen JavaScript preloader script nodig om je hover plaatjes in te laden. Just do it with CSS ;)