CSS/Tutorials/Image-Replacement

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Unter Image Replacement versteht man das Ersetzen des Inhalts von HTML-Elementen durch Bilder. Dabei ist es das hauptsächliche Ziel, den ursprünglichen Inhalt unbedingt zu erhalten, weil er wichtige Informationen für den Fall enthält, dass die Grafik fehlt. Wenn etwa eine Überschrift durch eine Grafik ersetzt wird, sind (mindestens) folgende Situationen zu berücksichtigen:

  • das Bild kann oder soll für ein visuelles Ausgabemedium (Bildschirm, Drucker) nicht dargestellt werden
  • das Dokument wird auf einem nichtvisuellen Ausgabemedium (Screenreader, Braille-Zeile) ausgegeben
  • eine Suchmaschine soll den Text der Überschrift kennen

Früher boten Bilder mehr Freiheiten, was unter anderem die Typographie anbelangt, und solche Ersetzungsverfahren sollten trotz der Darstellung von Bildern die Struktur, die Semantik und den (Text-)Inhalt eines Dokuments erhalten. Populäres Ziel solcher Techniken waren Überschriften oder auch Navigationen.

Empfehlung: Nutzen Sie die Möglichkeiten, die Ihnen CSS bietet:
für Hintergründe

Alternativ können Sie SVG einbinden:

Anwendungsbeispiel[Bearbeiten]

Beispiel
.ohne-text { 
  border: 0; 
  font: 0/0 a; 
  text-shadow: none; 
  color: transparent; 
  background: url(image-replacement.png); 
}
In diesem Beispiel werden alle Festlegungen für Text, Schatten und Rahmen auf 0, bzw. transparent gesetzt, sodass der Text auf dem Bildschirm unsichtbar wird und durch das Hintergrundbild ersetzt werden kann.

Weblinks[Bearbeiten]