Jeg har længe haft den overbevisning, at man måtte kunne lave grafiske rollovers med CSS alene, altså uden brug af mouseover, mouseout og tilhørende JavaScript.
For nylig kom jeg 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.
Bemærk også i dette eksempel 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
Internet Explorer indsætter et linjeskift efter hvert li-element, medmindre
ul.menu li { display:block;}
ændres til:
ul.menu li { display:inline;}
Jørgen Farum Jensen, september 2004