SELFHTML: Dynamisches HTML / Praxis / Bilderbuch zum Umblättern

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