## Bilderbuch zum Umblättern

| Hinweise zu diesem Beispiel Quelltext mit Erläuterungen Anzeigebeispiel: So sieht's aus

## Hinweise zu diesem Beispiel

Es gibt Seiten, auf denen Ihre Besucher Bilder sehen wollen. Wenn Sie beispielsweise über eine Stadt oder ein Land berichten oder über ein Treffen mit Freunden, mögen die Besucher gerne Bilder davon sehen. Das hier vorgestellte Beispiel zeigt, wie man solche Bilder einmal anders präsentieren kann. Ohne viel scrollen oder andere Seiten aufrufen zu müssen, kann der Anwender in den vorhandenen Bildern vor- und zurück blättern. Damit der Bildaufbau auch mal etwas anders aussieht als sonst, ist eine Art "Vorhang-Auf"-Effekt eingebaut. Die Bilder werden nicht einfach angezeigt, sondern "enthüllt".

## Quelltext mit Erläuterungen

Das Beispiel zeigt eine vollständige HTML-Datei mit dem Bilderbuch.

Die Datei `dhtml.js`, in der die Funktionen der DHTML-Bibliothek enthalten sind, muss vorhanden sein und sich im Beispiel im gleichen Verzeichnis befinden wie die HTML-Datei.

### Beispiel:

Anzeigebeispiel: So sieht's aus ( DHTML-Bibliothek)

    <html><head><title>Test</title>
    <script type="text/javascript" src="dhtml.js"></script>
    <script type="text/javascript">
    <!--
    var Bild = new Array();
    Bild[0] = new Image(); Bild[0].src="bilderbuch01.gif";
    Bild[1] = new Image(); Bild[1].src="bilderbuch02.gif";
    Bild[2] = new Image(); Bild[2].src="bilderbuch03.gif";
    Bild[3] = new Image(); Bild[3].src="bilderbuch04.gif";
    Bild[4] = new Image(); Bild[4].src="bilderbuch05.gif";

    var zeige = 0;
    var Breite = 300;
    var aktuelleBreite = 0;
    var Schrittweite = 6;
    var Schrittverzoegerung = 1;

    function Blaettern(Richtung) {
     zeige = zeige + Richtung;
     if(zeige > Bild.length - 1) zeige = 0;
     else if(zeige < 0) zeige = Bild.length - 1;
     if(DOM || MS)
       getElem("id","Bildbereich",null).style.clip="rect(0 0 225 0)";
     if(DOM && !MS && !OP) {
       var img = document.createElement("img");
       var src = document.createAttribute("src");
       src.nodeValue = Bild[zeige].src;
       img.setAttributeNode(src);
       getElem("id","Bildbereich",null).replaceChild(img, getElem("id","Bildbereich",null).firstChild);
     }
     else if(MS) {
       document.all.Bildbereich.innerHTML = "<img src=\"" + Bild[zeige].src + "\">";
     }
     else if(NS) {
       getElem("index",0,null).visibility = "hide";
       setCont("index",0,null,"<img src=\"" + Bild[zeige].src + "\">");
       getElem("index",0,null).clip.right = 0;
       getElem("index",0,null).visibility = "show";
     }
     BildAufbauen();
    }

    function BildAufbauen() {
     if(aktuelleBreite <= Breite) {
      if(DOM || MS && !OP)
        getElem("id","Bildbereich",null).style.clip="rect(0 "+ aktuelleBreite +" 225 0)";
      else if(NS)
        getElem("index",0,null).clip.right = aktuelleBreite;
      aktuelleBreite = aktuelleBreite + Schrittweite;
      window.setTimeout("BildAufbauen()", Schrittverzoegerung);
     }
     else {
      aktuelleBreite = 0;
      if(DOM || MS)
        getElem("id","Bildbereich",null).style.clip="rect(0 "+ Breite +" 225 0)";
      else if(document.layers)
        getElem("index",0,null).clip.right = Breite;
     }
    }

    function SEITE_init() {
     if(DOM && !MS && !OP) {
       img = document.createElement("img");
       var src = document.createAttribute("src");
       src.nodeValue = Bild[0].src;
       img.setAttributeNode(src);
       getElem("id","Bildbereich",null).appendChild(img);
     }
     else if(document.all)
       document.all.Bildbereich.innerHTML = "<img src=\"" + Bild[0].src + "\">";
     else if(NS)
       setCont("index",0,null,"<img src=\"" + Bild[0].src + "\">");
    }
    //-->
    </script>
    <style type="text/css">
    <!--
    #Bildbereich {
     position:absolute; left:10px; top:140px; padding:0px; clip:rect(0 300 225 0); visibility:show; }
    #Navigationsbereich {
    position:absolute; left:320; top:140; width:100; font-size:18pt; }
     -->
    </style>

    </head>
    <body bgcolor="#FFFFFF" onLoad="SEITE_init()">

    <div id="Bildbereich">
    </div>

    <div id="Navigationsbereich">
    [<a href="javascript:Blaettern(-1)"><b><<</b></a>]
    [<a href="javascript:Blaettern(1)"><b>>></b></a>]
    </div>

    </body>
    </html>

### Erläuterung:

Im Körper der HTML-Datei des Beispiels werden zwei `div`-Bereiche definiert. Der erste `<div>`-Bereich ist zum Anzeigen der jeweils 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 Bereiche werden mit Hilfe entsprechender CSS-Eigenschaften absolut positioniert. Die entsprechenden CSS-Definitionen stehen im Dateikopf im `style`-Bereich und beziehen sich auf die id-Namen der Bereiche.

Die Beispieldatei enthält ferner zwei JavaScript-Bereiche im Dateikopf. Im ersten, leeren JavaScript-Bereich wird die DHTML-Bibliothek eingebunden. Im einleitenden `<body>`-Tag wird wie üblich die Funktion `DHTML_init()` aus der eingebundenen DHTML-Bibliothek aufgerufen, um diese zu initialisieren. Ferner wird aber auch die Funktion `SEITE_init()` aufgerufen, die im JavaScript im Dateikopf notiert ist. Diese Funktion sorgt dafür, dass das erste Bild angezeigt wird.

Damit das Beispiel des Bilderbuches zum Umblättern sauber funktioniert, passiert jedoch schon vorher etwas. Gleich beim Einlesen der Datei, also außerhalb jeder Funktion, wird der JavaScript-Code ausgeführt, der zu Beginn des zweiten JavaScript-Bereichs notiert ist. Dort werden erst mal alle Grafiken eingelesen, 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. Dazu kommt das images-Objekt von JavaScript zum Einsatz. Zuerst wird ein neuer, leerer Array angelegt. Dann wird der Array mit Grafikobjekten gefüllt. 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.

Die Funktion `SEITE_init()` zeigt dann nach ihrem Aufruf die erste Grafik innerhalb des vorgesehenen Anzeigebereichs an. Dabei ist mal wieder viel Unterscheidungsarbeit nötig, um die verschiedenen Browser und ihre DHTML-Modelle zu bedienen. Das DOM-Modell ist in diesem Fall für den Internet Explorer vorläufig noch nicht anwendbar, da dieser zumindest in der Version 5.x das Erzeugen von Attribut-Knoten nach DOM-Syntax noch nicht unterstützt. Mit der Abfrage `if(DOM && !MS && !OP)` werden der Internet-Explorer und auch Opera von der Bearbeitung nach dem DOM-Modell ausgeklammert. Nur Netscape 6.x gelangt in diesen Bereich. Dort wird mit den Funktionen `createElement()` und `createAttribute()` des document-Objekts der HTML-Code für das neue Bild erzeugt und dann mit zusammengebastelt. Der Internet Explorer gelangt dagegen in den Zweig, der mit `else if(MS)` beginnt. Dort wird sich der praktischen Methode `innerHTML` des `all`-Objekts bedient, um den gewünschten HTML-Code zusammenzubasteln. Schließlich bleibt noch Netscape 4.x übrig, der in den Zweig `else if(NS)` gelangt und die Grafik mit der Funktion `setCont()` aus der DHTML-Bibliothek zusammengesetzt bekommt. An diesem Beispiel sehen Sie deutlich, wie mühsam das Unterscheiden zwischen Browsern und DHTML-Modellen oft ist. Außerdem können Sie sehen, dass das DOM-Modell bei allen Vorteilen manchmal auch sehr umständlich zu handhaben ist. Eine Methode wie `innerHTML` beim `all`-Objekt gibt es im DOM nicht, weil dort neue Knoten streng nach den Regeln der Auszeichnungssprachen-Syntax erstellt und zusammengestellt werden müssen. Opera ist gegenwärtig noch nicht in der Lage, Inhalte dynamisch zu ändern und wird komplett ausgeschlossen.

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, 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. So entsteht ein Endlos-Effekt für den Anwender beim Blättern. Anschließend wird der Inhalt des Anzeigebereichs für das Bild neu geschrieben, und zwar mit dem neuen Bild. Dabei muss wieder genauso mühsam zwischen den Fähigkeiten der Browser unterschieden werden wie in der Funktion `SEITE_init()`. Am Ende wird dann noch die Funktion `BildAufbauen()` aufgerufen.

Die Funktion `BildAufbauen()` ist für den dynamischen Aufroll-Effekt beim Anzeigen der neuen Grafik zuständig. Dazu wird von der CSS-Eigenschaft `clip` Gebrauch gemacht. Um sie zu setzen, kann die Basis-Funktion `getElem()` aus der DHTML-Bibliothek für den Elementzugriff verwendet werden. Allerdings ist der Aufruf für Netscape 4.x anders als bei den anderen Browsern, weshalb wieder eine if-else-Weiche nötig ist. Nach Durchlaufen der Wertveränderung des rechten Clip-Rands ruft sich die Funktion `BildAufbauen()` selbst wieder auf, und zwar innerhalb von `window.setTimeout()`. Dabei kommen die Variablen `Schrittweite` und `Schrittverzoegerung` zum Einsatz, die zu Beginn des Scriptbereichs notiert sind. Probieren Sie dort bei der anfänglichen Wertzuweisung ruhig auch mal andere Werte aus.
Am Ende, wenn die oberste if-Bedingung der Funktion `BildAufbauen()` erfüllt ist, nämlich dass 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.

| CGI und HTML
| Laufende Datums-/Uhrzeitanzeige

© 2001 selfhtml@teamone.de