a: en a:hover in 1 plaatje

Een negatieve margin gebruiken?

Nee, was iets anders.

Je hebt een plaatje van bv 50px hoog (er van uitgaande dat je button 25px hoog is)

en je background van je button is de eerste 25px en op de hover toon je de andere 25px

code:

<?php // Ja ik hou van highlighting en ben te lui om code tags te typen =)
.button a {
background: url('img/button_bg.png') top left repeat-x;
}

.button a:hover {
backgroudn: url('img/button_bg.png') bottom left repeat-x;
}
?>

je kunt toch bij de hover het plaatje naar boven/beneden duwen met margin?

<?php // Ja ik hou van highlighting en ben te lui om code tags te typen =)
.button a {
background: url('img/button_bg.png') top left repeat-x;
}

.button a:hover {
margin-top:5px !important;//Naar beneden duwen
}
?>

Dat van paradox werkt! Thanks

@ Timen: als je dan alleen de background-position op 25px left zet: ja, maar een margin werkt niet.

Een margin gaat over de margin op het element zelf en niet een margin op je background. Dit zou betekenen dat de hele button verspringt. Dus je moet de background verplaatsen

Dan heb ik roel gewoon niet gesnapt ^^

Juij ^^
Np, Roel xD

Negatieve margins werken niet. Heeft immers geen invloed op je afbeelding, maar op je anchor tag.

Mocht je nou meerdere afbeeldingen in 1 hebben. ( stel je hebt ook een :focus en dergelijke )

Dan moet je er rekening mee houden dat background-position: top left;
en dergelijke niet werken.

Je moet dan pixels gebruiken. Echter, je moet niet rekenen op de hoogte - breedte als bij top left of bottom left, maar dat de eerste waarde die je invult, de breedte is en de 2e de hoogte.

Background-position: 5px 10px; wordt dus links 5px, en top 10px;