Webdesign mit JavaScript
Nick Heinle & Bill Pena
1.Auflage Juli 2002
ISBN 3-89721-275-7
282 Seiten
|
|
|
|
|
Webdesign mit JavaScriptNick Heinle & Bill Pena 1.Auflage Juli 2002 ISBN 3-89721-275-7 282 Seiten |
 |
 |
 |
 |
Sicher wissen Sie bereits, daß Sie das Browserfenster mit Frames in mehrere Abschnitte zerlegen können, die jeweils eigenständige Fenster sind. JavaScript verleiht Ihnen ein hohes Maß an Kontrolle über Ihre Frames, so daß Sie sie auf verschiedene Art bearbeiten können. In diesem Kapitel erfahren Sie, wie Sie für Ihre Website eine ausgefeiltere Oberfläche erstellen, indem Sie Frames mit JavaScript steuern.
Frames werden häufig als Navigationshilfe verwendet, wobei ein seitlicher Frame eine konsistente Navigations-Symbolleiste und ein Hauptframe den Inhalt enthält. Abbildung 3-1 veranschaulicht anhand der Hompage von Safari, Tech Books Online die klassische Verwendung von Frames. Der schmale Frame auf der linken Seite enthält Verweise auf die thematischen Bereiche dieser Website. Wenn Sie einen dieser Links anklicken, wird das entsprechende Dokument in den großen Frame auf der rechten Seite geladen. Wenn Sie z.B. den Link »Web Development« anklicken, wird eine Liste der Bücher in dieser Kategorie in den Hauptframe geladen. Abbildung 3-2 veranschaulicht dies.
Es ist relativ einfach, diese Navigationsleiste in HTML zu erstellen. Das Beispiel 3-1 zeigt einen Beispielcode für das Frameset, das das Layout dieser Seite beschreibt. Das Frameset gibt an, welche Dokumente in den jeweiligen Frames angezeigt werden. Das Tag frameset teilt die Seite in zwei Spalten auf: Die erste (linke) Spalte ist 140 Pixel breit, und die zweite Spalte nimmt den Rest des Browserfensters ein. Die frame-Tags geben die Dokumentquelle und den Namen des betreffenden Frames an. In unserem Beispiel heißt der erste Frame navigationsleiste und der zweite hauptfenster.
<html> <head> <title>Safari | O'Reilly Books Online</title> </head> <frameset cols="140,*"> <frame src="frame/navigation.html" name="navigationsleiste"> <frame src="frame/hauptfenster.html" name="hauptfenster"> </frameset> </html>
Innerhalb des Dokuments für die Symbolleisten, navigation.html, teilen Sie den Links mit dem Attribut target mit, wohin sie ihre Dokumente laden sollen. Beispiel 3-2 zeigt das HTML-Fragment, mit dem web_development.html in den Hauptframe geladen wird, wenn der Anwender den Link »Web Development« im Navigationsframe anklickt.
<html> <head> </head> <body> ... <a href="web_development.html" target="hauptfenster">Web Development</a> ... </body> </html>
In JavaScript gibt man Frames zwar nach demselben Grundprinzip als Verweisziel an, muß einige Dinge aber doch anders machen:
parent.hauptfenster.location = "web_development.html";
Das wesentliche Element dieser Zeile ist hauptfenster.location. Es weist JavaScript an, nicht auf die Eigenschaft location des aktuellen Fensters (dies wäre window.location), sondern auf die des Frames hauptfenster zuzugreifen. Die Verwendung von parent mag an dieser Stelle verwirrend erscheinen. Wenn Sie Frames wie z.B. hauptfenster und navigationsleiste erstellen, werden diese zu Eigenschaften des Framesets (des Dokuments, das die Frames definiert). Wenn Sie dann von navigationsleiste aus auf hauptfenster zugreifen möchten, gehen Sie demnach zu dem Frameset, das navigationsleiste definiert hat, hinauf (dieses wird standardmäßig als parent bezeichnet) und greifen von dort aus auf hauptfenster zu - also parent.hauptfenster.location. Abbildung 3-3 veranschaulicht dies.
Nachdem wir nun die Syntax kennen, können wir die Frames in JavaScript mit Verfahren steuern, die in HTML nicht zur Verfügung stehen. Sehen wir uns noch einmal das Fernbedienungsfenster an, das wir in Kapitel 2 erstellt haben. Wenn Sie es dem Anwender ermöglichen möchten, ein Fernbedienungsfenster von navigations-leiste aus zu starten, dann ist nicht das Frameset, sondern navigationsleiste das Verweisziel aller Links im Fernbedienungsfenster. Dies liegt daran, daß das entsprechende Dokument die folgende Funktion enthält (siehe Beispiel 2-15):
function go(url) {
opener.location = url;
}
Diese Funktion bewirkt, daß alle Links im Fernbedienungsfenster auf Zielpunkte im Fenster opener verweisen. Da navigationsleiste das Fenster ist, das das Fernbedienungsfenster geöffnet hat (Frames werden als eigenständige Fenster betrachtet), weisen alle Links hierher. Aber natürlich sollten die Links eigentlich auf hauptfenster weisen. Dies erreichen Sie mit einer einfachen Änderung des Codes:
function go(url) {
opener.parent.hauptfenster.location = url;
}
Dieser Code beruht auf einem einfachen Konzept: Da navigationsleiste das Ursprungsfenster ist, können Sie auf hauptfenster zugreifen, indem Sie von navigationsleiste (opener) zum Frameset (parent) hinauf- und dann zu hauptfenster hinuntergehen. Dasselbe Konzept behält seine Gültigkeit auch dann, wenn Sie das ganze Frameset ändern und damit alle Frames löschen und das verlinkte Dokument im gesamten Browserfenster anzeigen möchten:
function go(url) {
opener.parent.location = url;
}
Nun ist das Frameset (parent) von navigationsleiste das direkte Verweisziel.
Für die Verwendung von JavaScript spricht auch, daß Sie mit Hilfe von JavaScript Ihre Frames auf- und zuklappen können. Vielleicht möchten Sie es den Anwendern z.B. ermöglichen, den Frame navigationsleiste zu entfernen, um Platz zu sparen. Erstellen Sie in navigationsleiste einfach einen Link, der die Adresse des Framesets (parent) auf die Adresse von hauptfenster setzt, wie es die Abbildung 3-4 veranschaulicht. Dadurch nimmt das Dokument in hauptfenster den gesamten Anzeigebereich ein.
<a href="javascript:parent.location = parent.hauptfenster.location;"> Navigationsleiste verbergen</a>
Vor- und Zurückgehen
Wie wir in Kapitel 2 bereits besprochen haben, können Sie auf Ihren Seiten mit Hilfe des history-Objekts des Fensters »Vor«- und »Zurück«-Links angeben. Da Frames wie separate Fenster behandelt werden, funktioniert dieses Verfahren auch bei Frames. Daher können Sie mit der Methode go() von history das Verlaufsprotokoll eines einzelnen Frames wie z.B. hauptfenster steuern. Der folgende Code zeigt, wie Sie in navigationsleiste die Schaltflächen Vor und Zurück erstellen, die zu hauptfenster weisen.
<a href="javascript:parent.hauptfenster.history.go(-1);">Previous</a> <a href="javascript:parent.hauptfenster.history.go(1);">Next</a> |
Hier ist eine Warnung angebracht: Hüten Sie sich vor dem Schaufenster-Effekt. Der Schaufenster-Effekt tritt dann ein, wenn eine fremde Website, die Frames verwendet, einen Verweis auf Ihre Website enthält und diese in ihren eigenen Frames öffnet. Das Ergebnis ist, daß die Leser Ihre Website nur als verkleinertes Fenster innerhalb der »Schaufenster«-Website sehen. Abbildung 3-5 zeigt eine Attrappe der Website von O'Reilly, bei der eine Seite im Frame einer anderen angezeigt wird. (Natürlich würde O'Reilly niemals wirklich solch einen Fehler machen!) Der Schaufenster-Effekt ist nicht nur häßlich, sondern kann selbst die erfahrensten Websurfer verwirren und verärgern. Sie sollten ihn also nach Möglichkeit vermeiden.
Zum Schaufenster-Effekt kommt es zwar nicht häufig, aber er ist doch eines der vielen Probleme, die auftreten können, wenn sich Websites in hohem Maß auf Frames stützen. JavaScript bietet hierfür jedoch eine Lösung. Fügen Sie in jedes Frameset auf Ihrer Website die folgenden Codezeilen ein:
if (parent != window) {
parent.location = window.location;
}
Dieser Code stellt sicher, daß das aktuelle Frameset das einzige Frameset im Browserfenster ist, indem er dafür sorgt, daß das Fenster (oder Frameset) unseres Dokuments »ganz oben« ist (d.h., es ist von keinem Frame umgeben). Die if-Anweisung ermittelt, ob sich das Dokument auf der obersten Ebene befindet, indem sie das window-Objekt und das parent-Objekt vergleicht. Falls das Dokument in keinem Frameset enthalten ist, ist das parent-Objekt immer gleich dem window-Objekt. Daher prüft man auf die Ungleichheit (!=) von parent und window. Falls das Dokument nicht ganz oben ist, setzt der Code es auf die oberste Ebene, indem er dem aktuellen Dokument die Adresse von parent zuweist (des Elternframes des gegebenen Fensters oder Frames, falls es einen gibt). Das Beispiel 3-3 zeigt, wie Sie diesen Code in einem Frameset verwenden.
<html> <head> <title>So nicht!</title> <script language="JavaScript"> if (parent != window) { parent.location = window.location; } </script> </head> <frameset cols="30%, 70%" frameborder="no" border="0" framespacing="0"> <frame name="navigationsleiste" src="navigationsdokument.html"> <frame name="hauptfenster" src="hauptfensterdokument.html"> </frameset> </html>
Wenn Sie das Szenario mit den Frames navigationsleiste und hauptfenster verwenden, das wir hier besprochen haben, werden Sie möglicherweise feststellen, daß es praktisch wäre, wenn man zwei Frames mit einem Klick verändern könnte. Wäre es nicht angenehm, wenn Sie durch Anklicken eines Links im Navigationsframe nicht nur im Frame hauptfenster die richtige Datei anzeigen, sondern auch die Anzeige im Frame navigationsleiste ändern könnten?
Genau dies macht Safari: Es lädt das Inhaltsverzeichnis (den linken Frame) neu, um ihn mit der Seite zu synchronisieren, die im Hauptdokument-Frame angezeigt wird. Abbildung 3-6 veranschaulicht dies. Wenn Sie dann zu verschiedenen Seiten der Website gehen, wird das Inhaltsverzeichnis immer dem Kontext angepaßt, ähnlich wie ein Dateimanager wie der Windows-Explorer die Ordner auf der linken und die Dateien im ausgewählten Ordner auf der rechten Seite anzeigt.
Wie üblich benötigen wir nur wenige Zeilen JavaScript-Code, um die Adresse mehrerer Frames zu setzen. Beispiel 3-4 zeigt die Funktion seitenwechseln(), die zwei Frames mit einem Klick ändert.
function seitenwechseln(navigationsleisteURL, hauptfensterURL) { parent.navigationsleiste.location = navigationsleisteURL; parent.hauptfenster.location = hauptfensterURL; }
Die Funktion seitenwechseln() ändert die Adresse sowohl des Frames hauptfenster als auch des Frames navigationsleiste, wenn Sie ihr die passenden URLs übergeben. Um z.B. die Adresse des Frames navigationsleiste auf navigationsdokument2.html und die Adresse des Frames hauptfenster auf hauptfensterdokument2.html zu setzen, erstellen Sie einen Link mit dem JavaScript-Pseudoprotokoll, der die Funktion seitenwechseln() ausführt.
<a href="javascript:seitenwechseln('navigationsdokument2.html',
'hauptfensterdokument2.html');">Mach' es zweimal</a>
Wenn ein einziges Anklicken noch weitere Frames ändern soll, fügen Sie in die Funktion einfach Verweise auf diese Frames ein, wie es Beispiel 3-5 zeigt:
function seitenwechseln(navigationsleisteURL, hauptfensterURL, nocheinURL) { parent.navigationsleiste.location = navigationsleisteURL; parent.hauptfenster.location = hauptfensterURL; parent.nocheins.location = nocheinURL; }
Frames stellen eine ausgezeichnete Möglichkeit dar, wechselnden Inhalt anzuzeigen. So zeigt z.B. das auf Frames basierende Werbungssystem von Macromedia (Abbildung 3-7) alle Werbebanner in einem einzigen Frame in der rechten unteren Ecke des Anzeigebereichs an.
Jedesmal, wenn ein neues Frameset geladen wird, zeigt die Macromedia-Seite ein neues Werbebanner an. Gehen wir noch einen Schritt weiter und rotieren die Banner alle fünf Sekunden, damit ein Anwender, der längere Zeit auf dieser Seite bleibt, nicht nur eines zu sehen bekommt. (Ja, das ist ärgerlich, aber wir müssen diese Werbeträger zufriedenstellen!) Wenn wir die Werbebanner in einen Frame setzen, können wir sie mit JavaScript aktualisieren. Beispiel 3-6 zeigt das vereinfachte Frameset, das wir bei der Erstellung rotierender Werbebanner verwenden werden.
<frameset onLoad="rotieren();" cols="30%, 70%" frameborder="no" border="0" framespacing="0"> <frameset rows="*, 200" frameborder="no" border="0" framespacing="0"> <frame name="klein" src="klein.html"> <frame name="rotierenderFrame" src="rotation1.html"> </frameset> <frame name="gross" src="gross.html"> </frameset>
Dieses Layout besteht aus drei Frames: gross, klein und rotierenderFrame. Im Frame rotierenderFrame werden die rotierenden HTML-Dokumente angezeigt. Wenn das Frameset geladen wird, wird die Funktion rotieren() ausgeführt. Außerdem müssen wir einige Variablen definieren, die verschiedene Aspekte der Rotation steuern. Beispiel 3-7 zeigt diese Variablen:
Für die Seiten (Werbebanner), die wir rotieren, gibt es ein besonderes Benennungsschema. Die Dateinamen aller HTML-Dokumente müssen dasselbe Präfix haben, das mit der Variablen praefix definiert wird. Nach dem Präfix sollte der Dokumentname eine Zahl enthalten (beginnend mit 1 und aufsteigend). In diesem Beispiel lautet das Präfix rotation. Die drei Dokumente, die wir rotieren möchten, heißen demnach rotation1.html, rotation2.html und rotation3.html.
Die Variable aktuelleSeite verfolgt, welche Seite gerade angezeigt wird, und gesamtSeiten gibt an, wie viele Seiten rotiert werden. Hier ist sie auf 3 gesetzt. Die Variable wartezeit gibt schließlich noch die Verzögerung vor jedem Bildwechsel an (in Millisekunden). Wir haben Sie auf eine Verzögerung von 5 Sekunden (5.000 Millisekunden) gesetzt.
Nachdem wir all diese Variablen definiert haben, müssen wir uns nun eine Funktion ausdenken, die die Seiten der Reihe nach rotiert. Beispiel 3-8 zeigt diese Funktion rotieren():
function rotieren() { if (aktuelleSeite < gesamtSeiten) { aktuelleSeite++; } else { aktuelleSeite = 1; } parent.rotierenderFrame.location = praefix + aktuelleSeite + '.html'; setTimeout('rotieren()', wartezeit); }
Diese Funktion wird ausgeführt, sobald die Frames angezeigt werden (achten Sie auf den Event-Handler onLoad in Beispiel 3-6). Sie ermittelt zuerst, ob die aktuelle Seite, aktuelleSeite, kleiner als die Gesamtzahl der Seiten, gesamtSeiten, ist. Falls dies zutrifft, erhöht sie aktuelleSeite um 1; anderenfalls setzt sie aktuelleSeite auf 1 zurück.
Der nächste Teil der Funktion setzt die Adresse von rotierenderFrame auf das Dokument, das mit dem Wert von aktuelleSeite übereinstimmt. Das heißt, falls aktuelleSeite 2 ist, wird die Adresse des Frames rotierenderFrame auf rotation2.html gesetzt (»rotation« + 2 + ».html«). Schließlich führt die Methode setTimeout() die Funktion rotieren() erneut aus, nachdem sie die in wartezeit angegebene Zeit gewartet hat.
Beispiel 3-9 zeigt den vollständigen Quellcode für das Rotationssystem.
<html> <head><title>Eine kleine Rotation</title> <script language = "JavaScript"> var praefix = 'rotation'; // Präfix für alle rotierten Seiten var aktuelleSeite = 0; var gesamtSeiten = 3; // Gesamtzahl rotierter Seiten var wartezeit = 5000; // Wartezeit vor der Anzeige einer Seite function rotieren() { if (aktuelleSeite < gesamtSeiten) { aktuelleSeite++; } else { aktuelleSeite = 1; } parent.rotierenderFrame.location = praefix + aktuelleSeite + '.html'; setTimeout('rotieren()', wartezeit); } </script> </head> <frameset onLoad="rotieren();" cols="30%, 70%" frameborder="no" border="0" framespacing="0"> <frameset rows="*, 200" frameborder="no" border="0" framespacing="0"> <frame name="klein" src="klein.html"> <frame name="rotierenderFrame" src="rotation1.html"> </frameset> <frame name="gross" src="gross.html"> </frameset> </html>
Da ein Webbrowser - zumindest theoretisch - jede Seite im Internet betrachten kann, haben die Webnutzer begonnen, die Welt von ihren PCs aus zu erkunden. Eine Technologie, die sich bei den Betreibern von Reise-, Immobilien- und Naturwissenschafts-Websites großer Beliebtheit erfreut, ist QuickTime VR (http://www.apple.com/quicktime/qtvr/). QuickTime VR bietet 360°-Panoramaansichten, die dem Anwender das Gefühl geben, er könne einen Raum vollständig betrachten, statt nur das zu sehen, was in die 9 x 13 Zentimeter eines normalen Fotos paßt. QuickTime VR verfügt zwar über eine Vielzahl komplizierterer Effekte wie z.B. Zoomen und Verschieben, aber schon mit wenig JavaScript-Code und Frames können auch wir einen einfachen Betrachter für Panoramabilder hinbekommen.
Ski-Zermatt ist eine Website zum Skigebiet von Zermatt. Sie bietet faszinierende 360°-Fotografien der Schweizer Alpen, die in verschiedenen Jahreszeiten und an verschiedenen Orten aufgenommen wurden und ganz sicher das Interesse aller Menschen mit einer Vorliebe für Schnee wecken. Abbildung 3-8 zeigt die Startseite für die Paronamabilder von Ski Zermatt, einen Katolog von Miniaturansichten mit Links zu den größeren Bildern.
Die Fotografien selbst sind zwar schon großartig, aber mit ein wenig JavaScript-Code werden sie noch interaktiv. In diesem Abschnitt werden wir einen selbstscrollenden Betrachter für Panoramabilder kreieren.
Zuerst richten wir ein einfaches Frameset mit zwei Zeilen ein, wie es Beispiel 3-10 zeigt.
<html> <head> <title>Selbstscrollender Frame mit JavaScript</title> </head> <frameset rows="308,*" cols="*"> <frame name="bildFrame" src="bild.html" noresize="noresize" marginwidth="0" marginheight="0"> <frame name="steuerFrame" src="steuer.html"> </frameset> </html>
Die Datei bild.html enthält ein Panoramabild eines Berges, und die Datei steuer.html enthält die Schaltflächen zum Scrollen des Frames. Abbildung 3-9 veranschaulicht das. Der obere Frame ist einfach: Er zeigt ein Bild ohne Ränder an. Alles Wesentliche befindet sich im unteren Frame: die Schaltflächen, mit denen man das Bild nach links und rechts scrollt, das Scrollen beendet und das Bild zurücksetzt. Die Schaltflächen Links und Rechts sind interessant, weil sie einen automatischen Kameraschwenk durch das Bild durchführen. Der Anwender braucht nur einmal zu klicken, damit das ganze Bild langsam scrollt und die Illusion einer Bewegung erweckt. Abbildung 3-10 zeigt unser Bergfoto, kurz bevor die Schaltfläche Rechts angeklickt wird.
Der Body des Steuerungsdokuments (steuer.html) besteht aus vier Formular-Schaltflächen, die JavaScript-Funktionen aufrufen, die sich auf den oberen Frame auswirken. Beispiel 3-11 zeigt diese Schaltflächen. Achten Sie darauf, daß die Funktionen scrollenLinks(), scrollenRechts(), stopScrollen() und zuruecksetzen() mit dem Event-Handler onClick aufgerufen werden.
<body> <div align="center"> <form> <input type="button" value="Links" onClick="stopScrollen(); scrollenLinks();"> <input type="button" value="Stop" onClick="stopScrollen();"> <input type="button" value="Zurücksetzen" onClick="zuruecksetzen();"> <input type="button" value="Rechts" onClick="stopScrollen(); scrollenRechts();"> </form> </div> </body>
Beim Scrollen soll sich das Bild so langsam von einer Anfangs- zu einer Endposition bewegen, daß der Anwender alles genau betrachten kann. Wenn wir die Position des Bildes in einem Schritt ändern, sieht der Anwender nur einen plötzlichen Wechsel von links nach rechts, kann den dazwischenliegenden Inhalt aber nicht betrachten. Daher müssen wir die Seite alle paar Millisekunden um einen kleinen Schritt verschieben und damit die Illusion einer Bewegung erzeugen. Das Beispiel 3-12 zeigt einige Variablen für die Scroll-Funktionen und listet die Funktion scrollenRechts() auf.
var position = 0; var bildBreite = 3024; var schritt = 2; var timeout; function scrollenRechts() { if (position < 0) { position = 0; } if (position <= (bildBreite - window.document.width)) { position = position + schritt; window.parent.bildFrame.scrollTo(position, 0); timeout = setTimeout("scrollenRechts()", 50); } }
Die Variable position ist der horizontale Anfangspunkt des oberen Frames; mit dieser Variable verfolgen die Scroll-Funktionen die aktuelle Position des Frames. bildBreite gibt die Breite des Bildes an, das im oberen Frame angezeigt werden soll. Diese Information benötigen wir, damit wir wissen, wann wir mit dem Scrollen nach rechts aufhören sollen. Die Variable schritt setzt das Pixel-Inkrement, d.h. den Wert, um den der Frame bei jedem Aufruf von scrollenRechts() oder scrollenLinks() gescrollt wird.
Wie Sie wahrscheinlich bereits geahnt haben, scrollt die Funktion scrollenRechts() den oberen Frame nach rechts. Nachdem wir den Wert von position geprüft haben, um sicherzugehen, daß wir uns nicht am linken oder rechten Rand des Bildes befinden, erhöht scrollenRechts() den Wert von position um schritt und ruft dann die Methode scrollTo() von bildFrame auf. Beachten Sie, daß wir die Breite des Browserfensters mit window.document.width ermitteln. Da diese Eigenschaft nur vom Netscape Navigator unterstützt wird, funktioniert dieses Beispiel im Internet Explorer nicht.1
scrollTo() ist eine Methode von window, die zwei ganze Zahlen entgegennimmt, die die (x,y)-Position der oberen linken Ecke des sichtbaren Dokumentbereichs angeben. Wenn eine Seite geladen wird, ist ihre Scroll-Position automatisch (0,0), also die obere linke Ecke des Dokuments. Um das Dokument um 2 Pixel nach rechts zu scrollen, addieren wir zur x-Koordinate einfach 2 und erhalten damit (2,0). Auf diese Weise steuert diese Methode, die in den Funktionen scrollenRechts() und scrollenLinks() verwendet wird, das, was der Anwender im oberen Frame sieht. Achten Sie darauf, wie wir im JavaScript-Baum vom aktuellen Frame (window) zum Frameset (parent) hinauf- und wieder zu bildFrame zurückgegangen sind, um die Methode scrollTo() für den oberen Frame aufzurufen.
scrollenRechts() verwendet außerdem die Methode setTimeout(), die wir im Beispiel zur Inhaltsrotation bereits gesehen haben. Hier rufen wir scrollenRechts() wiederholt mit setTimeout() auf, wobei jeder Aufruf den oberen Frame um einige Pixel nach rechts bewegt. Die Illusion der Bewegung erzeugen wir mit setTimeout(). Das zweite Argument von setTimeout() steuert, wie oft scrollenRechts() aufgerufen wird. Wir verwenden hier den Wert 50, der für 50 Millisekunden steht. Dadurch wird das Bild 20mal pro Sekunde verschoben. Beachten Sie, daß der von setTimeout() zurückgegebene Wert der Variablen timeout zugewiesen wird. Mit dieser Variable werden wir die Wiederholung an anderer Stelle anhalten.
Die Funktion scrollenLinks() ist fast identisch mit scrollenRechts(). Allerdings ist die Bewegung - und damit auch ein Teil der Berechnung - umgekehrt, wie Beispiel 3-13 zeigt.
function scrollenLinks() { if (position > (bildBreite - window.document.width)) { position = bildBreite - window.document.width; } if (position >= 0) { position = position - schritt; window.parent.bildFrame.scrollTo(position, 0); timeout = setTimeout("scrollenLinks()", 50); } }
Die letzten beiden Funktionen, stopScrollen() und zuruecksetzen(), geben uns zusätzliche Kontrollmöglichkeiten. Sie sind im Beispiel 3-14 dargestellt.
function stopScrollen() { clearTimeout(timeout); } function zuruecksetzen() { stopScrollen(); position = 0; window.parent.bildFrame.scrollTo(position, 0); }
Die Funktion stopScrollen() verwendet clearTimeout() - die Komplementärfunktion zu setTimeout() -, um das Timeout zu beenden, das die Funktionen scrollenLinks() und scrollenRechts() wiederholt aufruft. Die Funktion zuruecksetzen() setzt den oberen Frame auf seine ursprüngliche Position zurück, indem sie position auf 0 setzt und scrollTo() aufruft.
Wie Sie sehen, ist keine dieser Funktionen sonderlich kompliziert, aber wenn man sie miteinander kombiniert und sie mit Schaltflächen verbindet, bilden sie ein interessantes neues Verfahren, mit dem Sie die Leser in Ihre Stadt oder Ihr Dorf versetzen können.
Beispiel 3-15 zeigt das vollständige Skript. Sie können es an Ihre Bedürfnisse anpassen, indem Sie die Dateinamen ändern, bildBreite auf den für Ihr Bild passenden Wert setzen und vielleicht auch die Variable schritt und damit die Geschwindigkeit ändern. Und schon sind Sie fertig!
<html> <head> <script language="JavaScript"> var position = 0; var bildBreite = 743; var schritt = 2; var timeout; function scrollenRechts() { if (position < 0) { position = 0; } if (position <= (bildBreite - window.document.width)) { position = position + schritt; window.parent.bildFrame.scrollTo(position, 0); timeout = setTimeout("scrollenRechts()", 50); } } function scrollenLinks() { if (position > (bildBreite - window.document.width)) { position = bildBreite - window.document.width; } if (position >= 0) { position = position - schritt; window.parent.bildFrame.scrollTo(position, 0); timeout = setTimeout("scrollenLinks()", 50); } } function stopScrollen() { clearTimeout(timeout); } function zuruecksetzen() { stopScrollen(); position = 0; window.parent.bildFrame.scrollTo(position, 0); } </script> </head> <body> <div align="center"> <form> <input type="button" value="Links" onClick="stopScrollen(); scrollenLinks();"> <input type="button" value="Stop" onClick="stopScrollen();"> <input type="button" value="Zurücksetzen" onClick="zuruecksetzen();"> <input type="button" value="Rechts" onClick="stopScrollen(); scrollenRechts();"> </form> </div> </body> </html>
| |
|
|
|
© 2002, O'Reilly Verlag GmbH & Co. KG
