Jeg havde længe i 2002, da jeg lavede dette eksempel, haft den overbevisning, at man måtte kunne lave grafiske rollovers med CSS alene, altså uden brug af mouseover, mouseout og tilhørende JavaScript.
Jeg kom så i en situation, hvor jeg måtte sætte handling bag min overbevisning. Denne rollover er det første resultat.
Princippet er rimeligt enkelt: Formater a-markøren med en passende højde og bredde til at den kan rumme et baggrundsbillede af passende størrelse. Udskift så det billede ved hjælp af a:hover egenskaben.
Bemærk at du ikke behøver at bekymre dig om preload: Alle billederne er indlæst før body-markøren indlæses og siden kan tegnes.
Dette eksempel er potentielt offer for GAFI-effekten. Hvis du ikke ved hvad det er, læs da min artikel FOUC=GAFI?.
Testet i IE 5, 6, Opera 7, Netscape 7, Firefox 0.9
Denne side er senest opdateret: 1. September, 2006