Teil 2: Webauftritt in einer Datei

Zunächst benötigt das Skript einige globale Variablen, damit es sich den aktuellen Zustand der auf dem Bildschirm befindlichen Seiten merken kann. In der Variable "aktuellerframe" wird die ID des aktuell sichtbaren DIVs gespeichert. Zu Beginn ist das "finh1" - die Startseite. In "step" ist die Schrittweite des Seitentausches definiert. Je höher dieser Wert, desto schneller und unharmonischer ist der eigentliche Wechsel.

"rein" und "raus" werden von den Wechselfunktionen benötigt, damit die korrekten DIVs auch ausgewechselt werden. Im Verlauf des Programms speichern die Funktionen die IDs der zu wechselnden DIVs. Die Logikvariable "wechselimgange" enthält den Zustand der Seite. Wird gerade ein Seitenaustausch vorgenommen, ist in dieser Variable der Wert TRUE gesichert, findet kein Seitenaustausch statt, ist der Wert FALSE.

Diese Zustände werden benötigt, damit das Skript nicht mehrere Seitenwechsel auf einmal durchführt. Die entsprechende Abfrage erkennen Sie in Zeile 11. Ein Seitenwechsel wird hier nur aktiviert, wenn einerseits kein anderer Wechsel aktiv ist und andererseits nicht die gleiche Seite aufgerufen wird, die bereits auf dem Bildschirm zu sehen ist.

Die Variablen "linksnachrechts" und "untennachoben" enthalten jeweils die beim Wechsel benötigten Positionen der DIV - für das entschwebende Fenster die Position des linken Randes und für das einschwebende Fenster die Position des oberen Randes. Schließlich benötigen wir noch eine Variable "schweben", die für das Intervall eingesetzt wird.

Die Funktion "wechsel()" übernimmt die Kontrolle und das Deklarieren der für die Bewegung notwendigen Variablen. Zunächst werden "rein" (neue Seite - Übergabevariable der Funktion) und "raus" (alte Seite - Wert aus "aktuellerframe") gefüttert. Es folgt die bereits beschriebene Abfrage, die entscheidet, ob ein Seitenwechsel überhaupt stattfinden darf.

In den Zeilen 13 und 14 wird das DIV, das die Daten der neuen Seite enthält, positioniert. Sein linker Rand wird auf den Standardwert, der sich aus dem Design ergibt, zurückgesetzt (in diesem Beispiel 180 Pixel). Der obere Rand kommt weit nach unten auf die Seite (1000px). Diese beiden Werte müssen Sie neu justieren, wenn Sie eine andere Anordnung der Seitenelemente generieren möchten. Der Schalter "wechselimgange" muss auf TRUE gesetzt werden. In Zeile 16 speichert die Funktion die Startwerte für die Bewegung und danach kann der Seitenaustausch beginnen.

Das Intervall in Zeile 17 ist auf eine Zehntelsekunde eingestellt. Die Funktion "move()" bearbeitet die neuen Positionen der beiden rein- und rausschwebenden DIVs. Die Position des linken Randes des alten DIVs wird um den Wert "step" erhöht, die des oberen Randes des neuen DIVs um "step" reduziert. In den Zeilen 23 und 24 kontrolliert die Funktion die Endpositionen der beiden DIVs. Der Einfachheit halber werden beide DIVs - sollten die Endpositionen erreicht sein - immer wieder auf diese Position gesetzt. Das erspart weitere detaillierte Abfragen und der Besucher der Seite bekommt davon nichts mit.

Erst wenn beide Endpositionen erreicht sind (Zeile 29), stoppt die Funktion die Bewegungen der DIVs und setzt das Intervall zurück. Zusätzlich wird die Variable "wechselimage" wieder auf FALSE gesetzt, damit die nächsten Seitenwechsel durchgeführt werden können. Die Funktion speichert den Namen des jetzt sichtbaren DIVs ("rein") in der Variablen "aktuellerframe".

Anpassungen

Das Beispielskript arbeitet mit einem Dachrahmen (900x50 Pixel), einem Navigationsrahmen (150x600 Pixel) und dem wechselnden Inhaltsbereich (740x600 Pixel). Zwischen den Rahmen ist ein wenig Raum, der für grafische Extras genutzt werden kann. Aus den Abständen ergibt sich eine Positionierung des Inhaltsrahmens von 70 Pixeln vom oberen Rand und 180 Pixeln vom linken Rand. Wenn Sie eine eigene Positionierung der Frames generieren, müssen Sie im Skript den oberen Rand und den linken Rand der neuen Positionen als Kontrollen für die Endposition im Skript anpassen (Zeilen 6, 14, 16, 23 und 29).

Das Tempo des Wechsels beeinflussen Sie entweder durch den Intervallaufruf in Zeile 17 oder die Schrittzahl in Zeile 3. Wenn Sie die Inhalte der Seiten in einer separaten Datei aufbauen, achten Sie darauf, dass Sie diese Schablonendatei auch mit den benötigten Formatierungs- Klassen aus CSS versehen, damit die Positionierung der einzelnen Seiten vor dem Einkopieren in die Hauptdatei perfekt stimmt. Sollten Sie mehr Raum für Ihre Inhalte benötigen als der Inhaltsframe zur Verfügung stellt, versehen Sie diesen mit dem CSS-Parameter "overflow : auto;". Bei Bedarf werden die Rollbalken am rechten Rand des DIVs eingeblendet.

DAS BEISPIEL-LAYOUT