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