Roll-over-effekt med CSS
Sat på siden 28-06-2007
Før musen over ikonet, og det ændrer farve eller udseende - det kaldes en roll-over-effekt, og normalt laves den med JavaScript. JavaScript er bare ikke så hentsigtsmæssig, hvis fx gæsten har slået det fra i sin browser.
Der er en måde, du kan lave en roll-over-effekt meget enkelt med stylesheets i stedet. Så vil du få et eksempel som følgende (som måske ikke vil virke i dit e-mail-program, når du modtager denne e-mail, men se tippet online):
Du kan naturligvis bruge andre billeder, som du selv vælger.
For op opnå denne roll-over-effekt skal du bruge et billede, der indeholder to billeder, nemlig mus-over og ikke-mus-over. Det, jeg har brugt til eksemplet, ser sådan her ud: 
Du kan lave sådan et billede ved at finde to billeder, der har samme størrelse, fx 64x64 pixels. Opret et nyt billede, der er dobbelt så bredt som hvert billede, og har samme højde, fx 128x64 pixels. Anbring det billede, du vil have synligt, i venstre side, og mus-over-billedet i højre side.
Herefter skal du indsætte følgende kode i dit stylesheet eller øverst i dokumentet, afhængigt af, om du linker til et eksternt stylesheet eller ej:
a.rollover {
display: block;
width: 64px;
height: 64px;
text-decoration: none;
background: url("os.jpg");
}
a.rollover:hover {
background-position: -64px 0;
}
Width og height i koden skal tilpasses størrelsen på dit billede. Det samme skal back-ground-position.
I html-dokumentet skal du have følgende kode:
<a href="#" class="rollover"> </a>
hvor du selvfølgelig kan indsætte hvad som helst i linket. Mellemrummet, der hvor linket normalt vises i browseren, skal dog forblive et mellemrum.