Link-Text mit CSS durch Grafik ersetzen?

[Felix Riesterer]

Liebe Selfer,

ich möchte einen Linktext durch eine anklickbare Grafik ersetzen. Nach Möglichkeit sollte das mit reinem CSS gelingen.

Beispiel:
<p id="abc">Lorem ipsum dolor sit amet. <a href="#">Bild</a></p>

"Bild" innerhalb von <a></a> soll nun durch eine Grafik ersetzt werden.

Mein Ansatz, der noch nicht zum gewünschten Ergebnis führt, war bisher dieser:

p#abc a { visibility: hidden; background: url(pfad/zum/bild) no-repeat; }

Durch das "visibility: hidden" wird der komplette Link aber ausgeblendet und dadurch unbenutzbar. Das dem Link verpasste Hintergrundbild ist ebenso unsichtbar (weil eben "hidden"). Auch Experimente mit a:before führen in die Wüste, da "hidden" eben "hidden" ist. Ohne "hidden" sieht man aber den Linktext ("Bild")...

Muss ich auf Javascript umsteigen, oder gibt es doch eine reine CSS-Lösung für mein Vorhaben?

Liebe Grüße aus Ellwangen,

Felix Riesterer.