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 es Start, Stop, Vor, Zurück und Verlassen 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 mit setTimeout() gearbeitet werden muss, sollte die zurückgegebene ID in einer Variablen abgespeichert werden.
Im Folgenden sehen Sie das Grundgerüst für die Datei nav.html; in den folgenden Abschnitten werden die Funktionen mit Inhalt gefüllt.
<html>
<head>
<script type="text/javascript"><!--
//globale Variablen
var seiten = 10; //Anzahl der Seiten tourX.htm
var stat = "stop"; //Status der Animation:
//"stop" oder "start"
var akt = 1; //aktuell angezeigte Seite tourX.htm
var ID = 0; //ID des letzten Timeouts
var delay = 10000; //Verzögerung in Millisekunden
//Funktionen
function 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="javascript:start()">Start</a></td>
<td><a href="javascript:stop()">Stop</a></td>
<td><a href="javascript:zurueck()">Zurück</a></td>
<td><a href="javascript:vor()">Vor</a></td>
<td><a href="javascript:verlassen()">Verlassen</a></td>
</tr>
</table>
</center>
</form>
</body>
</html>
10.3.2 Diashow starten
Wenn der Benutzer auf Start klickt, muss zuerst überprüft werden, ob die Diashow nicht etwa schon läuft (über die Statusvariable stat). 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 Funktion lade(), 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 mit clearTimeout() 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 wird clearTimeout() und danach lade() aufgerufen. Beachten Sie, dass die vorherige oder nächste Seite sofort aufgerufen werden soll, also wird setTimeout() 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!
|
