:hover bei <img>

[Beat]

Wie funktioniert das mit dem :before bzw. :after?
Ich kann hier doch eigentlich auch nur das background-image ändern oder?

Nehmen wir folgenden Fall
<a class="IR1 bild1" href="http://example.org">Linkziel</a>

Ein normaler link mit einer Klasse die an Image-Replacement-1 erinnert.
die zweite Klasse zeigt später, welches Bild wir einfügen als Background wollen

Zuerst mal die Technik, die aus MSIE versteht.
also mit background-image

a.IR1
{
   display:block;  /* wir brauchen Block Eigenschaften */
   width:200px;    /* nimm an das Bild habe eine width von 200px */
   height:30px     /* ditto */
   color:#fff;     /* schriftfarbe */
   background:#000 url(background.jpg) top right no-repeat;
   /* Wir wollen die Schrift hinaus komplimentieren */
   text-indent:-99em; /* sollte reichen */
   overflow:hidden;   /* nichts anbrennen lassen */
}
a.bild1{background: url(background.jpg) top right no-repeat;}

Ich habe das jetzt nicht getestet.

Selbst arbeite ich nochmals etwas komplexer, weil ich Sprites einsetze.
(Viele Bildausschnitte im gleichen Bild)

Diese Technik löst nicht den Fall CSS an, Bilder aus.
Mit diesem Mangel kann man aber leben.
Normalerweise verwende ich bei Buttons die Schrift im Text, muss sie also nicht hinauskomplimentieren.
(text-indent entfällt)

Beispielanwendung siehst du auf meiner HP (Link im Head der Message)

mfg Beat