Link-Text mit CSS durch Grafik ersetzen. Weitere Varianten.

[CarstenP]

Hallo Felix,

ich will aber kein zusätzliches HTML-Element in den Quelltext setzen, da dieser unverändert bleiben soll! Wozu verwende ich denn CSS mit Selektoren, wenn ich dann doch wieder extra ein neues, semantisch nicht wirklich notwendiges Element "einpflanzen" muss?

Das Hauptproblem der meisten Image-Replacement-Techniken ist, daß der normale Text nicht sichtbar ist, wenn der Browser zwar das CSS interpretiert, die Bilder aber aus welchen Gründen auch immer nicht geladen werden (z.B. Opera mit deaktivierten Bildern), so auch bei Deiner Lösung. Daher verwendet der von Auge verlinkte Ansatz ein zusätzliches Element, damit Text und Bild getrennt voneinander behandelt werden können.

Ich habe mich mal ein bißchen daran versucht, das Beispiel 3 aus dem von Auge verlinkten Artikel http://wellstyled.com/css-replace-text-by-image.html so weit anzupassen, daß auch hier der Text sichtbar bleibt, wenn die Bilder nicht geladen werden.

Der folgende Code funktioniert in Mozilla und Opera. Ohne Bilder wird der Linktext angezeigt, mit Bildern hat man einen grafischen Link mit Hover-Zustand (online unter http://www.carsten-protsch.de/selfforum/testcases/image-replacement/):

CSS:

  
li {  
  position:relative;  
  width:100px;  
  height:40px;  
  border:solid 1px #000;  
}  
li a span {  
  position:absolute; left:0; top:0; z-index:1;  
  width:100%; height:100%;  
  background:url("bild.png") top left no-repeat;  
  cursor:pointer; /* nur für IE nötig */  
}  
li a:hover span {  
  background: url("bild.png") 0 -40px;  
}  

HTML:

<ul>  
  <li><a href="http://www.example.com/">Linktext<span></span></a></li>  
  <li><a href="http://www.example.com/">Linktext<span></span></a></li>  
  <li><a href="http://www.example.com/">Linktext<span></span></a></li>  
</ul>  

Das Problem im IE: Er kehrt aus dem Hover-Zustand nicht mehr in den Grundzustand zurück. Weiß irgendjemand, wie man dieses Problem im IE beheben könnte?

Der Idealfall wäre natürlich, daß das Bild auch im IE wieder in den Normalzustand zurückspringt. Falls es keine Lösung gibt, könnte man das :hover natürlich auf span wirken lassen, so daß das Bild im IE gar nicht erst in den Hover-Zustand übergeht...

Hier gibt es überbrigens eine Übersicht über diverse Image-Replacement-Methoden: < http://meiert.com/de/releases/20050513/>

Viele Grüße
Carsten