von Thomas Salvador.
In diesem Artikel geht es einmal mehr um meine besonderen Lieblinge, HTML-Tabellen. Der hier vorgestellte Effekt ist nicht mehr der neuste. Er wurde April 1997 gebaut und einer Site verwendet. Eine erste Beschreibung findet sich in [1].
Die hier gelieferte ist eine technisch wesentlich verbesserte Version. Durch einen Trick wird eine Browsereigenart umschifft und der benötigte Code und Aufwand bei der Verwendung drastisch reduziert.
Ein passenderer Titel wäre "Tabellen mit Hintergründen, durch die der Seitenhintergrund farblich getönt hindurch scheint".
Huh?
Stellen Sie sich vor, Sie haben ein Hintergrundbild auf der Seite. Nun setzen Sie eine Tabelle davor. Ihr Hintergrund ist weder Blau, noch das Hintergrundbild der Seite, sondern der Hintergrund ist das bläulich getönte Hintergrundbild der Seite. Das sieht z.B. so aus:
Feine Sache? Das will ich meinen. Beim Zoomen und Konvertieren sind zwar die Farben etwas kaputt gegangen. Um es nicht noch schlimmer zu machen, habe es unscharf gelassen. Das ist aber alles nicht so wichtig hier. Sie können klar erkennen, dass das "TS" ohne Versatz durch die Tabelle scheint. Den Rahmen der dortigen Tabelle könnte man ebensogut abschalten.
Sie brauchen ein geeignetes Hintergrundbild und ein paar Tabellen
Zunächst machen Sie Ihre Tabelle, die diesen Hintergrund bekommen soll, wie üblich.
Die im weiteren "Hintergrund-Tabelle" genannte Tabelle ist die, die den Hintergrund erzeugt. Es handelt sich um eine 1x1-Tabelle mit einem Hintergrundbild
<table cellpadding="0" cellspacing="0" border="0" background="hintergrund.gif"> <tr><td>INHALT</td></tr> </table>
Sie sehen, dass die Tabelle minimale Abstände hat und ein Hintergrundbild hintergrund.gif lädt. Anstelle von INHALT kopieren Sie jeweils Ihre komplette Tabelle.
ist nun der Knackpunkt. Erzeugen Sie ein Hintergrundbild in einer hellen Farbe in der Form, dass Sie die Pixel schachbrettmusterartig setzen und nicht setzen:
P P P P P P P = Farbiges Pixel des Tabellen-Hintergrundes P P P P P P P P P P P P
Beispiel, ein echtes Hintergrundbild ist größer, z.B. 32x32 oder 64x64
Sind Sie fertig, so speichern Sie das Bild im GIF-Format, wobei sie die ungesetzen Pixel auf transparent stellen. Im Endeffekt haben Sie damit ein Bild, welches abwechselnd durchsichtig und farbig ist.
Diese Beispiele können Sie downloaden:
blau |
grau |
grün |
rot |
gelb |
blau |
grau |
grün |
rot |
gelb |
Bei der Betrachtung passiert dreierlei.
AAAAAA P P P PAPAPA P = Farbiges Pixel des AAAAAA P P P APAPAP Tabellen-Hintergrundes AAAAAA P P P PAPAPA A = Pixel des Hintergrundbildes AAAAAA P P P APAPAP der Webseite AAAAAA P P P PAPAPA AAAAAA P P P APAPAP AAAAAA P P P PAPAPA
Die Tönung rührt von der (schlechten) Auflösung menschlicher Augen her. Die beiden schachbrettmusterartig vermischen Bilder sind für diese nicht mehr trennbar. Und dies sogar bei geringer Bildschirmauflösung nicht. Natürlich sehen Sie es bei geringer Entfernung, nicht aber schon bei kürzeren Abständen, etwa normalem Sitzen vor einem Monitor.
Man sollte natürlich alles Probesehen, damit Bilder nicht kaputt gehen oder etwas unleserlich wird.
Betrachten wir anschließend noch ein vollständiges Beispiel, mit kompletten Source und Kommentaren insbesondere noch mal zur Ausdehnung.
<div align="center"> <table cellpadding="0" width="300" cellspacing="0" border="0" background="/images/tabbacky.gif"> <tr><td> <!-- INNENLIEGENGE TABELLE BEGINN --> <table width="100%" border="1" cellspacing="0"><tr><td> <span class="f4"> - <a href="https://brauchbar.de/artikel/html/...">Zum Artikel</a><br> - <a href="https://brauchbar.de/artikel/html/">Zu den HTML-Artikeln</a><br> - <a href="https://brauchbar.de/">Zur Homepage</a><br></span> <!-- INNENLIEGENGE TABELLE ENDE --> </td></tr></table> </td></tr> </table> </div>
[1] Thomas Salvador: "Tabellen mit halbtransparentem Hintergrund" Web-Master 3-4/98 S. 38.