ICH HAB'S!!

[Auge]

Hallo

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à.

Beim Stöbern durch die von Martin verlinkten Suchergebnisse fiel mir auch folgender Link auf: http://wellstyled.com/css-replace-text-by-image.html, der vom Suchergebnis des Stopdesign Artikels aus erreichbar ist.

Dort wird der Text in das eigentliche Element notiert und ein leeres <span></span> bekommt einerseits das Bild zugewiesen und wird andererseits _über_ den Text platziert.

Dortiges Beispiel, bezogen auf eine Überschrift:

  
   #chapter-one {  
      margin:0; padding:0;  
      position:relative;  
      width:200px; height:80px;  
      margin:0; padding:0;  
      overflow:hidden;  
      }  
   #chapter-one span {  
      display:block;  
      position:absolute; left:0; top:0; z-index:1;  
      width:200px; height:80px;  
      margin:0; padding:0;  
      background:url("chapter-one.gif") top left no-repeat;  
      }  

<h2 id="chapter-one">Chapter One<span></span></h2>

Diese Idee gefällt mir auch ganz gut.

Tschö, Auge