CSS rollover

Kort och gott: hur skapar man en "image rollover" med CSS och semantiskt korrekt XHTML? Jag har googlat men inte hittat något exempel på en sådan.

Tack på förhand!

Det finns många sätt. Ska bilden vara en länk också?

<a href="dinlank.html" id="rollover">Klicka här</a>

<style type="text/css" media="screen">
#rollover {
            width: 100px;
            height: 100px;
            display: block;
            background-image: url("bild1.jpg");
            text-indent: -10000px;
}

#rollover:hover {
            background-image: url("bild2.jpg");
}
</style>

Annars går det bra att lösa med javascript.

Det där var ju faktiskt smidigt, tack för den! :) Jag märkte dock att det uppstod ett streck i FF trots "text-indent"-prylen, men jag använde istället "text-decoration:none" och la in en & nbsp; i länken istället. Kanon!

Jag hade lagt texten inom en <span> och sedan satt

[red]
#rollover span
{
display: none;
}
[/red]

På så sätt kommer de som surfar utan css att se länken. Dock inte de som har bilder avslaget, men de såg ju inte din länk tidigare heller....

mv icaaq

<a href="#">foo<span></span></a>

a, a span { display:block; width:100px; height:50px; }
a { position:relative; overflow:hidden; }
a span { position:absolute; top:0; left:0; background:url(foo) left bottom; }
a:hover span { background-position:left top; }

Då ser man texten i scenariot CSS på, bilder av.

Hmm...det verkar funka lite halvtaskigt i IE. :(

Jag upptäckte också linjen i Firefox nu. Den går enkelt att plocka bort med en overflow: hidden;

<a href="dinlank.html" id="rollover">Klicka här</a>

<style type="text/css" media="screen">
#rollover {
            width: 100px;
            height: 100px;
            display: block;
            background-image: url("bild1.jpg");
            text-indent: -10000px;
            overflow: hidden;
}

#rollover:hover {
            background-image: url("bild2.jpg");
}
</style>

Att lägga in en massa extra span är onödigt i det här fallet.