10.3 Diashow   Als Beispielanwendung dieses Kapitels soll eine Diashow entwickelt werden. Ihre Firma hat eine Firmenpräsentation erstellt. Diese soll nun auch in die Website integriert werden. Da die Präsentation mit einem mittelmäßigen Präsentationsprogramm erstellt worden ist, liegen Ihnen lediglich zehn HTML-Seiten vor, die aber nicht miteinander verlinkt sind. Unser Ziel soll es nun sein, diese zehn HTML-Seiten nacheinander anzuzeigen; alle zehn Sekunden soll die nächste Seite geladen werden. Um dem Besucher der Webseiten wenigstens ein bisschen Interaktivität vorzugaukeln, soll er die Animation anhalten, aber auch eine Seite vor- oder zurückspringen können. Das ist Ihr Pech und mein Glück, denn ohne diese Zusatzbedingung könnte man diese Aufgabe auch mit normalen (HTML-)Mitteln lösen.
10.3.1 Vorbereitungen  Beginnen wir mit der Grundstruktur der Präsentation: Das folgende Frameset teilt das Browserfenster in die Präsentationsfläche (oben) und den Navigationsbereich (unten) auf: <html><head><title>Firmenpräsentation</title></head><frameset rows="*,80"> <frame src="tour.html" name="Tour" /> <frame src="nav.html" name="Nav" /></frameset><noframes><body>Ihr Browser kann mit Frames nichts anfangen!</body></noframes></html> 
Hier klicken, um das Bild zu Vergrößern
Abbildung 10.5 Die Startseite der Diashow In Abbildung 10.5 sehen Sie, wie die Navigationsleiste ungefähr aussehen soll. Als Optionen soll esStart,Stop,Vor,Zurück undVerlassen geben. Wir werden JavaScript-Funktionen mit denselben Namen schreiben. Dazu brauchen wir noch eine Funktion, die die nächste Seite der Animation in den oberen Frame lädt. Außerdem benötigen wir noch globale Variablen. Unter anderem muss jederzeit bekannt sein, welche Seite der Diashow gerade angezeigt wird und ob die Animation gerade läuft oder pausiert. Neben einigen weiteren Angaben (wie viele Seiten? welche Verzögerung zwischen den Seiten?) benötigen wir noch eine weitere Variable. Da mitsetTimeout() gearbeitet werden muss, sollte die zurückgegebene ID in einer Variablen abgespeichert werden. Im Folgenden sehen Sie das Grundgerüst für die Dateinav.html; in den folgenden Abschnitten werden die Funktionen mit Inhalt gefüllt. <html><head><script type="text/javascript"><!--//globale Variablenvar seiten = 10; //Anzahl der Seiten tourX.htmvar stat = "stop"; //Status der Animation: //"stop" oder "start"var akt = 1; //aktuell angezeigte Seite tourX.htmvar ID = 0; //ID des letzten Timeoutsvar delay = 10000; //Verzögerung in Millisekunden//Funktionenfunction start() { //Funktion zum Starten/Fortsetzen der Diashow}function stop() { //Funktion zum Anhalten/Pausieren der Diashow}function vor() { //Funktion zum Vorspringen in der Animation}function zurueck() { //Funktion zum Zurückspringen in der Animation}function verlassen() { //Funktion zum Verlassen der Animation}//--></script></head><body onload="start()"><form onsubmit="return false;"><center><table border="0" cellpadding="10"><tr><td><a href="#">Start</a></td><td><a href="#">Stop</a></td><td><a href="#">Zurück</a></td><td><a href="#">Vor</a></td><td><a href="#">Verlassen</a></td></tr></table></center></form></body></html>
10.3.2 Diashow starten Wenn der Benutzer aufStart klickt, muss zuerst überprüft werden, ob die Diashow nicht etwa schon läuft (über die Statusvariablestat). Falls doch, braucht keine Aktion zu erfolgen; andernfalls muss der Status geändert und die neue Seite nach Ablauf von zehn Sekunden geladen werden. Das Laden der weiteren Seiten geschieht dann in der Funktionlade(), die sich – mittels Timeout – immer wieder selbst aufruft. Ein besonderer Fall liegt noch vor, wenn die letzte Seite der Diashow angezeigt wird: Dann darf auch keine Aktion erfolgen. function start() { if (stat == "stop" && akt < seiten) { stat = "start"; ID = setTimeout("lade(akt+1)", delay); }}function lade(nummer) { parent.Tour.location.href = "tour" + nummer + ".html"; akt = nummer; if (stat == "start" && akt < seiten) { ID = setTimeout("lade(akt+1)", delay); } else if (akt == seiten) { stat = "stop"; }}
10.3.3 Diashow anhalten Auch das Anhalten der Diashow gestaltet sich nicht weiter schwierig: Die Statusvariable muss angepasst werden, und das Laden der nächsten Seite muss mitclearTimeout() unterbunden werden: function stop() { stat = "stop"; clearTimeout(ID);}
10.3.4 Vorwärts und rückwärts springen Der Wechsel zur vorherigen oder zur nächsten Seite der Diashow ist relativ ähnlich. Zuerst wird überprüft, ob man sich auf der ersten bzw. letzten Seite befindet (dann geschieht nichts); dann wirdclearTimeout() und danachlade() aufgerufen. Beachten Sie, dass die vorherige oder nächste Seite sofort aufgerufen werden soll, also wirdsetTimeout() nicht verwendet. function vor(){ if (akt < seiten) { clearTimeout(ID); lade(akt+1); }}function zurueck() { if (akt > 0) { clearTimeout(ID); lade(akt-1); }}
10.3.5 Diashow verlassen Der letzte Punkt auf der Aufgabenliste, das Verlassen der Diashow, verdient eigentlich keine eigene Überschrift. Es wird einfach eine andere Seite geladen; als ordentlicher Programmierer löschen Sie außerdem noch alle Timeouts. function verlassen() { clearTimeout(ID); top.location.href = "andereseite.html";}Beachten Sie, dass im obigen Code die neue URL auf der obersten Ebene der Frame-Hierarchie aufgerufen wird; Sie rufen ja das JavaScript-Kommando in einem Unterframe auf! | 
