GUFFA | FOTO | PROGRAMMERING | GÄSTBOK

CSS : Mouseover-effekt utan Javascript

Att göra en knapp som byter bakgrundsbild när man pekar på den med musen är ganska enkelt med CSS. För att få den att byta bild så använder man pseudo-klassen :hover för att definiera vilken bild som ska visas när musen pekar på den. För att kunna använda :hover så måste vi lägga klassen på en a-tagg.

Det här lägger vi i stilmallen:

.Button
{
   background: url(knapp.gif);
   display: block;
   width: 80px;
   height: 20px;
   line-height: 20px;
   text-align: center;
}

.Button:hover
{
   background: url(knapp_over.gif);
}

background: url(knapp.gif); - här sätter du bakgrundsbilden för knappen.

display: block; - behövs för att a-taggen ska bete sig som en div-tagg, så att vi kan sätta storleken på den.

width: 80px; - bredden på knappen.

height: 20px; - höjden på knappen.

line-height: 20px; - sätter radhöjden till samma höjd som knappen, vilket gör att länktexten centreras vertikalt.

text-align: center; - centerar länktexten horisontellt.

background: url(knapp_over.gif); - här sätter du bilden som ska visas när man pekar på knappen.

Så här skriver vi html-koden för knappen:

<a href="Hej.asp" class="Button">hej</a>

Det är allt som behövs. Ifall du inte vill ha någon text på knappen så är det bara att ta bort den:

<a href="Hej.asp" class="Button"></a>

Göran Andersson