SELFHTML/Quickbar Dynamisches HTML Lösungen für die Praxis

| ## Bilderbuch zum Umblättern
| Bilderbuch zum Umblättern - das Beispiel

## Bilderbuch zum Umblättern - das Beispiel

Anzeigebeispiel: So sieht's aus

In diesem Beispiel werden dynamisch mehrere Grafiken geladen, jedoch immer nur eine angezeigt. Mit Hilfe von Blätterverweisen kann der Anwender vorwärts und rückwärts blättern, um die nächste Grafik an der gleichen Stelle wie die alte anzuzeigen. Dabei wird die neue Grafik von links her "aufgerollt". Solche Effekte sind zwar für den MS Internet Explorer 4.x viel effizienter durch Überblend-Effekte mit dem revealTrans-Filter machbar, doch dieses Beispiel hier funktioniert dafür mit Netscape 4.x genau so.

Hinweis: Zur besseren Orientierung enthält das Beispiel Verweise zu den entsprechenden Erläuterungen, z.B. 1*. Diese Verweise gehören nicht zum Quellcode. Falls Sie das Beispiel in einen Editor kopieren, müssen Sie diese Verweise löschen. Andernfalls erhalten Sie JavaScript-Fehlermeldungen.

### Beispiel:

    <html>
    <head>
    1* <script language="JavaScript">
    <!--
    var Bild = new Array(7);
    Bild[0] = new Image(); Bild[0].src="sonne.gif";
    Bild[1] = new Image(); Bild[1].src="mond.gif";
    Bild[2] = new Image(); Bild[2].src="sterne.gif";
    Bild[3] = new Image(); Bild[3].src="feuer.gif";
    Bild[4] = new Image(); Bild[4].src="wasser.gif";
    Bild[5] = new Image(); Bild[5].src="luft.gif";
    Bild[6] = new Image(); Bild[6].src="erde.gif";
    var zeige = 0;
    var aktuelleBreite = 0;
    var Breite = 289;
    var Geschwindigkeit = 20;

    6* function Blaettern(Richtung)
    {
     zeige = zeige + Richtung;
     if(zeige > Bild.length - 1) zeige = 0;
     else if(zeige < 0) zeige = Bild.length - 1;
     if(document.all)
     {
       document.all.Bildbereich.style.clip = "rect(0 0 302 0)";
       document.all.Bildbereich.innerHTML =
       "<layer width=289 height=302><img src=\"" + Bild[zeige].src + "\"></layer>";
     }
     else if(document.layers)
     {
      document.layers[0].visibility = "hide";
      document.layers[0].document.open();
      document.layers[0].document.write("<img src=\"" + Bild[zeige].src + "\">");
      document.layers[0].document.close();
      document.layers[0].clip.right = 0;
      document.layers[0].visibility = "show";
     }
     BildAufbauen();
    }

    7* function BildAufbauen()
    {
     if(aktuelleBreite <= Breite)
     {
      if(document.all)
        document.all.Bildbereich.style.clip="rect(0 "+ aktuelleBreite + " 302 0)";
      else if(document.layers)
        document.layers[0].clip.right = aktuelleBreite;
      aktuelleBreite = aktuelleBreite + Geschwindigkeit;
      window.setTimeout("BildAufbauen()",0);
     }
     else
     {
      aktuelleBreite = 0;
      if(document.all)
        document.all.Bildbereich.style.clip="rect(0 " + Breite + " 302 0)";
      else if(document.layers)
        document.layers[0].clip.right = Breite;
     }
    }
    4* function Init()
    {
     if(document.all)
      document.all.Bildbereich.innerHTML =
      "<layer width=289 height=302><img src=\"" + Bild[0].src + "\"></layer>";
     else if(document.layers)
     {
      document.layers[0].document.open();
      document.layers[0].document.write("<img src=\"" + Bild[0].src + "\">");
      document.layers[0].document.close();
     }
    }
    // -->
    </script>
    </head>
    3* <body bgcolor=#FFFFFF onLoad="Init()">

    2* <div id="Bildbereich" style="position:absolute; left:10px; top:140px;
    padding:0px; clip:rect(0 289 302 0); visibility:show;">
    <layer width=289 height=302></layer></div>

    5* <div style="position:absolute; left:320; top:140; width:100; font-size:18pt;" width=100>
    [<a href="javascript:Blaettern(-1)">&lt;&lt;</a>]
    [<a href="javascript:Blaettern(1)">&gt;&gt;</a>]
    </div>

    </body>
    </html>

### Erläuterung:

Damit das Beispiel des Bilderbuches zum Umblättern sauber funktioniert, müssen beim Einlesen der HTML-Datei erst auch alle Grafiken eingelesen werden, die im Verlauf des Umblätterns angezeigt werden sollen. Denn nur wenn die Grafiken zu diesem Zeitpunkt bereits im Arbeitsspeicher sind, gibt es keine Synchronisationsprobleme.
Das Einlesen der betroffenen Grafiken geschieht in dem JavaScript-Bereich, der im Beispiel im Dateikopf notiert ist (1*). Zuerst wird ein neuer Array angelegt, bestehend aus so vielen Elementen, wie das Bilderbuch an Bildern zeigen soll. Im obigen Beispiel gibt es dann 7 Variablen `Bild`, ansprechbar mit `Bild[0]` bis `Bild[6]`. Diese Variablen sind zunächst abstrakt, man kann darin speichern was man will. Im Beispiel wird in jeder der Variablen ein neues Bildobjekt gespeichert. Dem jeweiligen `Image`-Objekt, das zu diesem Zweck erzeugt wird, wird über die `src`-Eigenschaft eine gewünschte Grafikdatei zugewiesen.

Anschließend werden noch ein paar globale Variablen definiert, die später benötigt werden.

Im Körper der HTML-Datei des Beispiels werden zwei `<div>`-Bereiche definiert (2*). Der erste `<div>`-Bereich ist zum Anzeigen der aktuellen Grafik gedacht. Der zweite Bereich enthält Verweise, mit deren Hilfe der Anwender vorwärts und rückwärts zwischen den Grafiken blättern kann. Beide `<div>`-Bereiche werden mit Hilfe entsprechender Style-Sheet-Angaben absolut positioniert.

Der erste `<div>`-Bereich enthält als Inhalt einen `<layer>`-Bereich. Der ist speziell für Netscape gedacht. Diese Form der Verschachtelung hat sich als praktikabel erwiesen. Denn der MS Internet Explorer ignoriert das `<layer>`-Tag. Netscape dagegen interpretiert zwar zuerst das `<div>`-Tag, freut sich dann aber über das innere `<layer>`-Tag, mit dem er bei Dynamischem HTML letztlich doch besser klar kommt.

Innerhalb des Anzeigebereichs für die Grafiken wird zunächst gar nichts angezeigt. Das Laden der ersten Grafik erfolgt bereits dynamisch mit Hilfe von JavaScript. Der Anfangsbefehl dazu steht im einleitenden `<body>`-Tag. Dort wird mit Hilfe des Event-Handlers `onLoad` die Funktion `Init()` aufgerufen (3*). Die Funktion `Init()` zeigt die erste Grafik innerhalb des vorgesehenen Anzeigebereichs an (4*). Dabei wird wie üblich durch die Abfragen nach dem verfügbaren Objekt (MS Internet Exlorer: `document.all`, Netscape: `document.layers`) ermittelt, auf welche Weise das dynamische Einfügen geschehen soll. Für den MS Internet Explorer wird einfach mit der Eigenschaft `innerHTML` des Objekts mit dem Namen `Bildbereich` dynamisch der HTML-Code zum Einbinden der ersten Grafik geschrieben. Dabei muß allerdings auch wieder das `<layer>`-Tag mit geschrieben werden, sonst ginge dieses verloren. Bei Netscape wird der Layer, der für Netscape ein Dokument im Dokument darstellt, mit Hilfe von `dcoument.write()` Inhalt gefüllt. Wichtig ist es, dabei zuerst `dcoument.open()` und abschließend `document.close()` aufzurufen, sonst funktioniert das Ganze nicht.

Das Blättern zwischen einzelnen Grafiken wird durch die beiden Verweise im zweiten `<div>`-Bereich angestoßen. Beide Verweise rufen die gleiche Funktion namens `Blaettern()` auf (5*), jedoch mit unterschiedlicher Parameterübergabe. Der Vorwärtsverweis übergibt `1`, der Rückwärtsverweis `-1`. Dadurch kann die Funktion `Blaettern()` diesen Parameter gleich zur Verwaltung benutzen.

Die Funktion `Blaettern()` fragt zunächst ab, ob entweder das erste oder das letzte Bild der Serie erreicht ist und legt im entsprechenden Fall wieder das letzte bzw. erste Bild als das anzuzeigende fest (6*). So entsteht ein Endlos-Effekt für den Anwender beim Blättern. Anschließend wird - ganz ähnlich wie in der Funktion `Init()` und wieder über die Abfrage nach der Verfügbarkeit von `document.all` oder `document.layers` - der Inhalt des Anzeigebereichs für das Bild neu geschrieben, und zwar mit dem neuen Bild. Dabei wird jedoch am Ende die Funktion `BildAufbauen()` aufgerufen.

Die Funktion `BildAufbauen()` ist für den dynamischen Aufroll-Effekt beim Anzeigen der neuen Grafik zuständig (7*). Dazu wird von der Eigenschaft `clip` Gebrauch gemacht. Jedoch abhängig vom Browser. Beim MS Internet Explorer (`document.all`-Zweig) wird die Style-Sheet-Angabe zu `clip` dynamisch neu geschrieben, und zwar so, daß die Variable `aktuelleBreite`, die laufend um den Wert der globalen Variablen `Geschwindigkeit` erhöht wird, das Aufrollen nach rechts bewirkt. Für Netscape (`document.layers`-Zweig) wird einfach die Eigenschaft `clip.right` des betroffenen Layer-Objekts dynamisch um den Wert von `aktuelleBreite` verändert.
Nach Durchlaufen der Wertveränderung des rechten Clip-Rands ruft sich die Funktion `BildAufbauen()` selbst wieder auf, und zwar innerhalb von `window.setTimeout()`, um einen Rekursionsfehler zu vermeiden.
Am Ende, wenn die oberste if-Bedingung der Funktion `Blaettern()` erfüllt ist, nämlich daß die aktuelle Breite größer als die Anzeigebreite der Grafik ist, gelangt die Funktion in den else-Zweig. Dort wird der clip-Wert für rechts auf den Endwert gesetzt, und die Prozedur des Umblätterns ist abgeschlossen.

weiter: | CGI und HTML
zurück: | Verschiebbare Seitenelemente

SELFHTML/Quickbar Dynamisches HTML Lösungen für die Praxis

© 1998 Stefan Münz, muenz@csi.com