Image Replacement Techniken bieten die Möglichkeit, ein Element im HTML-Code auszublenden und dafür ein Bild anzuzeigen. Dies bietet sich zum Beispiel für Texte an, die man gerne in einer Sonderschrift anzeigen möchte.
Es gibt unzählige Möglichkeiten, dies zu realisieren. Ich stelle Euch in diesem Artikel die zwei beliebtesten und einfachsten Methoden vor, um dies mit CSS zu realisieren.
Dies ist wohl die älteste Methode einen Text mit Bilder zu ersetzen.
...
Das HTML-Gerüst für diese Methode sieht folgendermaßen aus:
<h1><span>Beispieltext</span></h1>
Das Besondere hierbei sind die Tags um den auszublendenden Text herum.
Das CSS zu diesem Beispiel sieht folgendermaßen aus:
h1 {
background-image: url(background.jpg);
height: 100px;
width: 300px;
}
h1 span {
visibility: hidden;
}
Zuerst wird dem H1 Tag ein Hintergrundbild gegeben. Danach wird die Überschrift noch entsprechend dem Bild skaliert. Man muss darauf achten, dass bei manchen Elementen noch ein Displayblock nötig ist, damit man sie skalieren kann.
Im nächsten Schritt wird der Beispieltext mit ausgeblendet.
Das ist schon der ganze Zauber.
Phark-MethodeIch persönlich bevorzuge diese Methode. Der Vorteil dabei ist, dass keine extra HTML Tags benötigt werden.
Das HTML-Gerüst bei dieser Methode sieht folgendermaßen aus:
<h1>Beispieltext</h1>
Einfach nur eine Überschrift oder ein andres HTML Element.
Per CSS nehmen wir folgende Formatierungen vor:
h1 {
background-image: url(background.jpg);
height: 100px;
text-indent: -5000px;
width: 300px;
}
Zuerst wird dem Element natürlich ein Hintergrundbild gegeben. Danach wird das Element wieder auf die Größe des Bildes skaliert, damit man es auch ganz sieht. Das besondere in diesem Beispiel ist die Zeile. Hier wird der Text, den das Element enthält, um 5000 px nach links verschoben und ist somit nicht mehr im Sichtbarkeitsbereich des Elements. Diese Methode ist sehr einfach und benötigt weniger Codes.
Vor- und Nachteile des Image ReplacingsDer entscheidende Vorteil ist natürlich, dass der HTML Code nicht verändert wird und alle Anpassungen im Stylesheet vor sich gehen und somit sehr flexibel zu verändern sind. Da freuen sich auch die Suchmaschinen, wenn es pure HTML Überschriften gibt und keine unleserlichen Bilder.
Nachteile dieser Methoden sind zum einen die Unverträglichkeit mit Screenreadern. Diese ignorieren meistens den ausgeblendeten Text und lesen gar nichts vor. Ein anderes Problem sind natürlich noch die Leute, die in ihrem Browser die Bilder deaktiviert haben und somit gar nichts angezeigt bekommen.
Wie immer gibt es Beispieldateien zu diesem Artikel, sowie den ganzen Text in einer PDF.
Tutorial als PDF ||
Beispieldateien
Euer CSS Hamster
Übermittlung Ihrer Stimme...
Neuste Kommentare
sehr nice ...de
Von nix kütt nix, wie man bei uns...