Tips&Tricks

til hjemmesiden, computeren og internettet

Tips & Tricks



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: Dobbelt billede af Windows der bliver skiftet ud med Mac

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">&nbsp;</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.

Kunne du lide tippet? Abonner gratis på mine nyhedsmails og få friske tips hver uge: Tilmelding til Tips og tricks
Lige nu: Få e-bogen "701 Tips og Tricks" gratis (normalpris $11,83) ved tilmelding.


|