CSS: Image Replacement

Erstellt: 24.04.2006 | Aktualisiert: 15.04.2007

XHTML-Elemente können durch Bilder ersetzt werden ohne den darin enthaltenen Text anzuzeigen. Diese Techniken erlauben unter anderem das Ersetzen des Haupttitels (h1) durch ein grafisches Logo. Dabei bleibt die Struktur und Semantik des XHTML-Dokumentes erhalten.

Phark-Methode

Eine der beliebtesten Varianten HTML-Elemente durch Bilder zu ersetzen ist sicherlich die so genannten Phark-Methode von Mike Rundle. Dank der Eigenschaft text-indent kann der im Element enthaltene Text mit einem extrem hohen Negativwert ausgerückt werden. Das heisst der Text ist nicht mehr sichtbar, da er sich “meilenweit” aus dem Sichtfeld des Browser schiebt.

h1 {
 background: url(muster.png);
 height: 25px;
 text-indent: -999em;
 width: 250px;
}

Die Technik überzeugt, allerdings sollten zwei Einschränkungen an dieser Stelle nicht verheimlicht werden:

  1. Die Technik wird durch Internet Explorer 5.0 NICHT unterstützt
  2. Darstellungsprobleme, wenn Bilder auf “aus” geschalten sind und CSS trotzdem aktiviert ist (Da sieht man nämlich gar nix, weder Bild noch Text)

Die letztere Problematik kann aber dank eines Javascript-Workarounds von Richard Rutter korrigiert werden. Dabei wird die CSS-Anweisung wieder neutralisiert und somit der ursprüngliche Text angezeigt.

Weblinks