nicht angemeldet
Liebe Selfer,
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; }
Meine Lösung ist diese:
p#abc a { display: block; width: 0; background: url(pfad/zum/bild) no-repeat; padding-left: 16px; overflow: hidden; }
Da der Link als Block-Element angezeigt wird, kann ich ihm eine Breite von Null geben. Damit die Hintergrundgrafik angezeigt wird, muss ich ihre Breite als padding-left definieren (in meinem Beispiel 16px), damit der Linktext "Platz macht". Dadurch wird die Hintergrundgrafik anklickbar, obwohl vom eigentlichen Link nix mehr zu sehen ist (dank overflow:hidden). Voilà.
Liebe Grüße aus Ellwangen,
Felix Riesterer.
Auge