Der besondere Seitenhintergrund

Es gibt viele Möglichkeiten, den Hintergrund eines HTML-Dokuments zu gestalten. Eine sehr Aufmerksamkeit erregende wird auf dieser Seite beschrieben.

Anleitung:

Zuerst schreibst du eine ganz normale HTML-Seite - mit dem Text, den Bildern, Tabellen… - was eben auf die Seite soll. Aber ohne Hintergrund! Dann überlegst du dir, an welcher Stelle der Seitenaufbau unterbrochen werden soll, damit der Farbwechsel erfolgen soll. Einerseits ist der Effekt wesentlich größer, wenn nicht eine leere Seite die Farbe wechselt und sich dann füllt. Andererseits ist es bei großen, langsamen Seiten nicht sinnvoll, zu warten bis große Bilder geladen sind. Dann passiert nämlich gar nichts, bevor die Bilder geladen sind, und der Betrachter hat die Seite vielleicht schon desinteressiert weggeklickt. Außerdem können die Bilder ja geladen, aber noch nicht angezeigt werden, während das Script abgearbeitet wird! Letztlich ist es aber Geschmacksache. Dann suchst du dir die Stelle, an der unterbrochen werden soll, im Quelltext.

Jetzt kommt etwas, was dem HTML-Laien erst erklärt werden muss: HTML-Code besteht aus Text und sogenannten Tags (Einzahl ist Tag. Mehrzahl ist trotzdem nicht Tage *g*). Wozu der Text da ist, ist wohl klar. Das ist der Text, der nachher auch im Dokument zu lesen ist. Die Tags sind so was wie Steuerbefehle. Alle Tags stehen in diesen spitzen Klammern: <>.

Das Tag <table> bedeutet zum Beispiel: Hier fängt eine Tabelle an. Logischerweise muss dann irgendwann das Tag </table> kommen. Das bedeutet nämlich: Hier hört eine Tabelle auf. Kommt das Tag </table> ohne dass vorher ein <table>-tag war, wird im günstigsten Fall die Seite nicht richtig dargestellt. Fast alle Tags haben also ein Anfangstag und ein Endtag. Beim Anfangstag stehen meistens noch Anweisungen dabei, wie das jeweilige Element auszusehen hat. <table border="1" cellpadding="10" cellspacing=0 width="100%"> ist also ein Tabellenanfang. Der Rest ist im Moment unwichtig. Das jeweilige Endtag sieht so wie das Anfangstag aus, nur ohne die zusätzlichen Anweisungen, aber mit einem / nach der <. Also hört auch diese Tabelle mit </table> auf.

Um die genaue Stelle zu finden, an der das Script stehen soll, muss man sich ein wenig Gedanken über diese Bereiche machen. Ein einfaches Beispiel:

In einer Seite ist mittig (das betrifft die rechts-links- Orientierung) eine Tabelle ohne Breitenangabe angeordnet. Man kann bei einer Tabelle festlegen, wie breit sie sein soll. Wenn man es nicht festlegt, richtet sich die Breite nach dem vorhandenen Platz und nach dem Platzbedarf des Tabelleninhalts. Logischerweise kann der Browser den Tabellenanfang erst darstellen, wenn das Tabellenende-Tag geladen ist. Schließlich könnte die letzte Zeile die längste sein. Dann richtet sich die Tabellebreite nach der letzten Zeile.

Wenn du das Hintergrund-Script also zwischen die 49-ste und 50-ste Zeile der Tabelle setzt, erscheint die ganze Tabelle erst nach dem Farbwechsel.

Ich zähle jetzt einige Bereiche auf, in die man das Script nicht setzen sollte:

Die genaue Position für das Script ist bestimmt. Und jetzt?

Jetzt wird das Script ausdem weißen Feld unten kopiert, und an der vorbestimmten Stelle in den Quellcode eingefügt. Dann wird das ganze als HTML-File abgespeichert und mit dem Browser geöffnet. Man sollte nie etwas veröffentlichen, bevor man sich das fertige Ergebnis angesehen hat.

Wer den Farbwechsel gerne schneller hätte, der kann den Wert bei var speed verändern. Je kleiner die Zahl, desto schneller läuft das Script

<script type="text/javascript">
<!--
var speed = 100;

function StringArray (n){
  this.length - n;
  for (var i =1; i <= n; i++) {
    this [i] = ' ';
  };
};

fader = new StringArray (16);
for (var i = 0; i < 10; i++) {
  fader[i] = i;
};

fader[10] = "a";
fader[11] = "b";
fader[12] = "c";
fader[13] = "d";
fader[14] = "e";
fader[15] = "f";

function hexadecimal(i) {
  return ("" + fader[Math.floor(i/16)] + fader[i%16]);
};

function fade(r2,g2,b2,r1,g1,b1) {
  for (var i = 0; i <= speed; i++) {
    var r = hexadecimal(Math.floor(r2 * ((speed-i)/speed) + r1 * (i/speed)));
    var g = hexadecimal(Math.floor(g2 * ((speed-i)/speed) + g1 * (i/speed)));
    var b = hexadecimal(Math.floor(b2 * ((speed-i)/speed) + b1 * (i/speed)));
    document.bgColor = "#" + r + g + b;
  };
};

fade(0,0,0,255,255,255);
fade(255,255,255,255,0,0);
fade(255,0,0,0,0,255);
fade(0,0,255,255,255,255);
//-->
</script>

Die Leerstellen an den Zeilenanfängen haben übrigens keine Bedeutung. Sie werden vom Browser ignoriert und dienen nur der Übersichtlichkeit.

Viel Spaß beim Ausprobieren

Um einen Link zu setzen, der direkt auf diese Seite führt, verwende folgende Url: