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 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

SELFHTML/Navigationshilfen

Dynamisches HTML

Beispiele für die Praxis