SELFHTML: Dynamisches HTML / Beispiele für die Praxis / Bilderbuch zum Umblättern

SELFHTML/Navigationshilfen Dynamisches HTML Beispiele für die Praxis
	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 bildbereich;
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 || MSIE4) {
    bildbereich.style.clip = "rect(0 0 225px 0)";
  } else if (NS4) {
    bildbereich.clip.right = 0;
  }
  if (DOM && bildbereich.firstChild) {
    bildbereich.firstChild.src = Bild[zeige].src;
  } else if (MSIE4) {
    bildbereich.innerHTML = '<img src="' + Bild[zeige].src + '">';
  } else if (NS4) {
    bildbereich.visibility = "hide";
    setContent("id", "Bildbereich", null,
      '<img src="' + Bild[zeige].src + '">');
    bildbereich.visibility = "show";
  }
  BildAufbauen();
}

function BildAufbauen () {
  if (aktuelleBreite <= Breite) {
    if (DOM || MSIE4) {
      bildbereich.style.clip = "rect(0 " + aktuelleBreite + "px 225px 0)";
    } else if (NS4) {
      bildbereich.clip.right = aktuelleBreite;
    }
    aktuelleBreite = aktuelleBreite + Schrittweite;
    window.setTimeout("BildAufbauen()", Schrittverzoegerung);
  } else {
    aktuelleBreite = 0;
    if (DOM || MSIE4) {
      bildbereich.style.clip = "rect(0 " + Breite + "px 225px 0)";
    } else if (NS4) {
      bildbereich.clip.right = Breite;
    }
  }
}

function Init () {
  bildbereich = getElement("id", "Bildbereich");
  if (DOM && document.createElement && bildbereich.appendChild) {
    var img = document.createElement("img");
    img.setAttribute("src", Bild[0].src);
    bildbereich.appendChild(img);
  } else if (MSIE4) {
    bildbereich.innerHTML = '<img src="' + Bild[0].src + '">';
  } else if (NS4) {
    setContent("id", "Bildbereich", null,
      '<img src="' + Bild[0].src + '">');
  }
}
</script>
<style type="text/css">
body { color:black; background-color:white; }
#Bildbereich { position:absolute; left:10px; top:140px; padding:0;
  clip:rect(0 300px 225px 0); visibility:show; }
#Navigationsbereich { position:absolute; left:320px; top:140px;
  width:100px; font-size:24px; }
</style>

</head>
<body onload="Init()">

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

<div id="Navigationsbereich">
[<a href="javascript:Blaettern(-1)">&lt;&lt;</a>]
[<a href="javascript:Blaettern(1)">&gt;&gt;</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 durch die 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 die Funktion 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 Init() zeigt dann nach ihrem Aufruf die erste Grafik innerhalb des vorgesehenen Anzeigebereichs an. Dabei ist einige Unterscheidungsarbeit nötig, um die verschiedenen Browser und ihre DHTML-Modelle zu bedienen. In Browsern, die das DOM-Modell unterstützen, wird mit den Funktionen createElement() und setAttribute() der img-Elementknoten für das neue Bild erzeugt. Mit appendChild() wird das Bild anschließend an das div-Element mit der ID Bildbereich gehängt. Der Internet Explorer 4 gelangt dagegen in den Zweig, der mit else if (MS4) beginnt. Dort wird die Elementknoten-Eigenschaft innerHTML genutzt, um den gewünschten HTML-Code zusammenzubasteln. Schließlich bleibt noch Netscape 4.x übrig, der in den Zweig else if (NS4) gelangt und die Grafik mit der Funktion setContent() 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 Eigenschaft wie das Microsoft-proprietäre innerHTML gibt es im W3C-DOM nicht, weil dort neue Knoten streng nach den Regeln der Auszeichnungssprachen-Syntax erstellt und zusammengestellt werden müssen.

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 bzw. das src-Attribut des vorhandenen Bildes aktualisiert. Dabei muss ebenso mühsam zwischen den Fähigkeiten der Browser unterschieden werden. 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, wird das style-Objekt verwendet. Das Setzen im Netscape 4.x erfordert eine andere Syntax, daher ist erneut eine Fallunterscheidung über if ... else ... nötig. Nach der Wertveränderung des rechten Clip-Rands ruft sich die Funktion BildAufbauen() mittels window.setTimeout() zeitverzögert selbst auf. Dabei kommen die Variablen Schrittweite und Schrittverzoegerung zum Einsatz, die zu Beginn des Script-Bereichs 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.


	Einführung in Perl
	Laufende Datums-/Uhrzeitanzeige

SELFHTML/Navigationshilfen Dynamisches HTML Beispiele für die Praxis