zur Startseite   ––>  

Ein Durch­sichti­ges Bild

Unsicht­bar auch im IE6,
im Format .gif

Einem weit verbreiteten Aberglauben zufolge kann der Internet Explorer in der Version 6 mit durchsichtigen Bildern nichts anfangen. Das stimmt nicht ganz. Probleme kann es mit Semitransparenz und Übergängen geben, aber Bilder im Gif-Format, deren Teile oder welche zur Gänze ohne Übergänge transparent sind, die beherrscht auch der IE6. Nur damit kein Missverständnis aufkommt: Nicht jedes GIF-Bild ist durchsichtig, aber man kann im Format GIF auch ein durchsichtiges Bild machen.

Mit einem gänzlich unsichtbaren Bild lassen sich verschiedene Kunststücke anstellen. Man kann damit zum Beispiel Abstände bewirken, die – mitunter anders als die eigentlich dafür gedachten CSS-Eigen­schaften margin oder padding – in allen Browsern gleich aussehen.

Da ein transparentes Bild unsichtbar ist, entfallen Probleme mit Korn, Auflösung oder Schärfe. Seine tatsächliche Größe kann deshalb ganz klein sein, die von Fall zu Fall unterschiedlichen Abmessungen erhält es erst im Code – entweder direkt in HTML oder über eine CSS-Klasse.

Zur Veranschaulichung folgen drei Bilder. Das erste hat in Wahrheit die Abmessungen von nur 1x1 Pixel, ist nur 0,085 KB groß und ist zudem durchsichtig. Es heißt tra.gif. Im Code ist es auf 800 Pixel Breite und 300 Pixel Höhe "aufgeblasen":

<img src="tra.gif" width="800" height="300">

Weil es unsichtbar ist, sehen Sie nur den Hintergrund hinter dem Bild. Und was sehen Sie noch? Richtig: Das "Loch". Den Abstand, den es bewirkt, weil es im Code die Abmessungen von 800 x 300 px bekommen hat. Und hier ist das erste Bild:

Genau, das war es eben. Und hier ist das zweite Bild, das ist sichtbar, rosa und grün. In Wahrheit ist es 30 x 30 px groß, hat aber im Code die gleichen Abmessungen von 800 Pixel Breite und 300 Pixel Höhe bekommen wie das obige durchsichtige Bild:

Und hier ist das dritte Bild. Um genau zu sein – das zweite. Das dritte Bild ist nämlich identisch mit dem zweiten, bloß wird es diesmal in der Originalgröße gezeigt, also nur 30 x 30 Pixel groß:

Hier sind noch die drei Codes für die zwei Bilder im Vergleich:

<img src="tra.gif" width="800" height="300">
<img src="test.gif" width="800" height="300">
<img src="test.gif" width="30" height="30">

Das Testbild kann man verwenden, um zu sehen, welche Abstände später das durchsichtige Bild machen wird. Man testet einfach mit dem Testbild und wenn alles fertig ist, wird nur noch die Zeichenkette test.gif durch tra.gif ersetzt. Fertig.

Sie können die beiden Bilder gerne abspeichern und nach Belieben verwenden, es kostet nichts. Natürlich freut es mich, wenn Sie auf Ihrer Homepage einen Link zu einer Seite meiner Domain setzen, aber es ist in diesem Fall keine Bedingung.

Wenn Sie verlinken möchten, zum Beispiel zur Startseite geht das mit dem folgenden Code; einfach an einer passenden Stelle in den Quelltext Ihrer Homepage kopieren:

<a href="http://www.zabra.at" target="_blank">www.zabra.at</a>


 nach oben

 

 sunset