Professionelle Bücher. Auch für Einsteiger.

Inhaltsverzeichnis
1 Einleitung
2 Webbrowser
3 JavaScript einbauen
4 Programmieren mit JavaScript
5 Datum
6 Zufall
7 Browserinformationen
8 Fenster
9 Formulare
10 Frames und Iframes
11 Grafiken
12 Cookies
13 Objekte und Arrays
14 Ereignisbehandlung
15 Fehlerbehandlung
16 DOM
17 DHTML und CSS
18 AJAX
19 XML
20 Web Services
21 AJAX-Frameworks
22 Plugins
23 Multimedia
24 Java
25 Serverseitige Technologien
26 JavaScript goes .NET
27 Code schützen
28 Top Secret: Passwortschutz
29 Signierte Skripte
30 JavaScript und Sicherheit
31 Navigation
32 Warenkorb
33 JavaScript-Bibliotheken
34 Referenz
35 Quellen im Web
36 Die Zukunft von JavaScript
Index
Download: - ZIP, ca. 9,2 MB
Buch bestellen
Ihre Meinung?
<< zurück | Galileo Computing / <openbook> / JavaScript und AJAX | vor >>
JavaScript und AJAX von Christian Wenz Das umfassende Handbuch
JavaScript und AJAX 839 S., mit DVD, 39,90 Euro Galileo Computing ISBN 3-89842-859-1 |
| Kapitel 11 Grafiken
|  | 11.1 Bildlein-Wechsle-Dich
|  |  | 11.1.1 Zugriff auf Grafiken
|  | 11.2 Animierte JPEGs
|  |  | 11.2.1 Eine Animation mit JavaScript
|  |  | 11.2.2 Bilder in den Cache laden
|  | 11.3 Animierte Navigation
|  |  | 11.3.1 Vorüberlegungen
|  |  | 11.3.2 Auf- und Zuklappen
|  |  | 11.3.3 Die einzelnen Menüpunkte
|  |  | 11.3.4 Verlinkung der Menüpunkte
|  |  | 11.3.5 Einbau in die HTML-Datei
|  | 11.4 Erweiterung der Navigation
|  |  | 11.4.1 Vorbereitungen
|  |  | 11.4.2 Leichte Änderungen
|  |  | 11.4.3 Doppeltes Mouseover
|  |  | 11.4.4 Das komplette Beispiel im Überblick
|  | 11.5 Tipps aus der Praxis
|  |  | 11.5.1 Vorladen – aber richtig
|  |  | 11.5.2 Ladestand einer Grafik
|  |  | 11.5.3 Fortschrittsanzeige
## 11.2 Animierte JPEGs Sie kennen sicherlich die Basis aller nervenden Werbebanner im World Wide Web – animierte GIF-Grafiken. Als das Grafikformat 1987 bzw. 1989 im Auftrag der Firma CompuServe entwickelt wurde, dachte noch niemand daran, dass dieses geheime Feature – nämlich die Integration mehrerer Einzelgrafiken in eine GIF-Datei – später einmal Furore machen sollte. Leider ist das nur mit GIF-Grafiken möglich, die ja auf nur 256 Farben beschränkt sind. Fotorealistische Animationen sind damit nicht oder nur in sehr schlechter Qualität möglich. Dafür wären die Formate JPEG und PNG besser geeignet, wenn sie denn Animationen unterstützen würden (was sie nicht tun). Mit JavaScript kann dieser Missstand behoben werden, und zwar mit dem Image-Objekt. Nach Ablauf einer bestimmten Zeitdauer wird einfach das nächste Bild der Animation eingeblendet. Im Folgenden finden Sie den Code, der die Animation mit einer Verzögerung von einer Sekunde zwischen den Einzelbildern auf den Bildschirm bringt:
    <html>
    <head>
    <title>JPEG-Animation</title>
    </head>
    <script text="type/javascript"><!--
    var bilder = new Array("ani1.jpg", "ani2.jpg",
    "ani3.jpg", "ani4.jpg");

    var naechstesBild = 0;  //Index des nächsten Bildes
    var verzoegerung = 1000;  //Verzögerung in Millisekunden

    function animation() {
       document.ani.src = bilder[naechstesBild];
       naechstesBild++;
       if (naechstesBild==bilder.length) {
          naechstesBild = 0;
       }
       setTimeout("animation();", verzoegerung);
    }
    //--></script>
    </head>
    <body onload="animation();">
    <h3>Animation</h3>
    <img src="ani1.jpg" name="ani" />
    </body>
    </html>
### 11.2.1 Eine Animation mit JavaScript Für das Skript werden ein paar globale Variablen benötigt:
    var bilder = new Array("ani1.jpg", "ani2.jpg", "ani3.jpg", "ani4.jpg");
    var naechstesBild = 0;  //Index des nächsten Bildes
    var verzoegerung = 1000;  //Verzögerung in Millisekunden
In dem Array bilder stehen die Dateinamen der einzelnen Grafiken der JPEG-Animation. In der Variablen naechstesBild wird der Array-Index des nächsten Bildes der Animation gespeichert. Angefangen wird beim ersten Bild. Es besitzt den Index 0, also enthält die Variable den Startwert 0. Die letzte Variable, die die Verzögerung in Millisekunden zwischen den einzelnen Animationsschritten enthält, müsste eigentlich nicht als global deklariert werden. Behalten Sie aber immer im Hinterkopf, dass Ihre Skripten von Leuten bearbeitet werden könnten, die sich nicht so gut in JavaScript auskennen. In so einem Fall ist es gut, wenn wichtige Parameter für das Skript an markanter Stelle stehen, so dass dort auch unbedarftere Kollegen Änderungen vornehmen können, ohne gleich den gesamten Programmcode zu ruinieren. Jetzt fehlt nur noch die Funktion animation(), die das nächste Bild der Animation anzeigt (der Index wird aus der Variablen naechstesBild gewonnen) und sich selbst nach einiger Zeit (diese steht in verzoegerung) wieder aufruft. Davor muss natürlich noch die Nummer des nächsten Bildes um eins erhöht werden. Sollte man beim letzten Bild angekommen sein, soll die Animation wieder von vorn beginnen; naechstesBild wird also auf 0 gesetzt.
    function animation() {
       document.ani.src = bilder[naechstesBild];
       naechstesBild++;
       if (naechstesBild==bilder.length) {
          naechstesBild = 0;
       }
       setTimeout("animation()", verzoegerung);
    }
Nun fehlt nur noch ein Punkt: die Funktion animation() muss erst einmal aufgerufen werden – beispielsweise mit dem onload-Event-Handler des <body>-Tags:
    <body onload="animation();">
### 11.2.2 Bilder in den Cache laden Wenn Sie dieses oder das letzte Beispiel auf der heimischen Festplatte oder auf dem lokalen Webserver ausprobieren, funktioniert alles wunderbar. Sobald Sie die Seiten aber in das World Wide Web stellen, werden Sie wahrscheinlich eine böse Überraschung erleben: Es dauert unter Umständen mehrere Sekunden, bis die neue Grafik erscheint. Der Grund dafür ist schnell gefunden: Die neuen Grafiken müssen ja erst einmal vom Browser angefordert und über das Internet übertragen werden. Je nach Qualität der Verbindung kann das schon seine Zeit dauern. Zwar können Sie mit JavaScript die Ladegeschwindigkeit des Browsers nicht verbessern, aber Sie können wenigstens so tun. Ist eine Grafik nämlich einmal geladen, so liegt sie im Speicher- oder Festplattencache des Browsers. Der Trick ist nun, die Grafiken nicht erst zu laden, wenn sie angezeigt werden sollen, sondern schon vorher. Das ist sogar in HTML möglich, man muss nur darauf achten, dass die Grafiken nicht optisch stören. Der erste Versuch, Höhe und Breite der Grafik auf 0 zu setzen, schlägt fehl, da die meisten Browser das ignorieren. Also muss man das nächstkleinere Maß nehmen: 1 × 1 Pixel.
    <img src="ani2.jpg" width="1" height="1" />
    <img src="ani3.jpg" width="1" height="1" />
    <img src="ani4.jpg" width="1" height="1" />
Wollen Sie komplett vermeiden, dass die Grafiken sichtbar oder erahnbar sind, müssen Sie in die JavaScript-Trickkiste greifen. Das Image-Objekt hilft Ihnen hierbei. Mit dem folgenden Befehl wird ein Image-Objekt erzeugt, dessen src-Eigenschaft auf "ani2.jpg" gesetzt wird. Der besondere Effekt hierbei: Die Grafik wird vom Browser im Hintergrund geladen und liegt damit im Cache.
    var img = new Image();
    img.src = "ani2.jpg";
Wenn man ganz sauber programmieren will, gibt man dem Konstruktor des Image-Objekts noch die Breite und Höhe der Grafik mit, was aber in der Praxis überhaupt keine Auswirkungen hat:
    var img = new Image(breite, hoehe);
    img.src = "ani2.jpg";
Die Instanz des Image-Objekts befindet sich nun im Speicher, und die Grafik wird vom Webserver angefordert, aber noch gar nicht angezeigt. Umgangssprachlich nennt man das Vorladen oder Preloading. Zuerst überarbeiten wir das Beispiel aus dem vorigen Abschnitt:
    <html>
    <head>
    <title>Bildlein-Wechsle-Dich</title>
    <script type="text/javascript"><!--
    var img_over;

    function preload() {
       img_over = new Image();
       img_over.src = "galileo_over.gif";
    }
    function over() {
       document.grafik.src = img_over.src;
    }
    function out() {
       document.grafik.src = "galileo_out.gif";
    }
    preload();
    //--></script>
    </head>
    <body onload="onload();">
    <a href="http://www.galileo-press.de/">
       <img src="galileo_out.gif" name="grafik"
          onmouseover="over();" onmouseout="out();" />
    </a>
    </body>
    </html>
Beim Laden des HTML-Dokuments wird die JavaScript-Funktion preload() aufgerufen, die die Grafik galileo_over.gif in den Cache des Browsers lädt. Die Grafik galileo_out.gif muss nicht extra geladen werden, sie wird ja im HTML-Dokument schon angezeigt. Beachten Sie auch die folgende neue Zeile in der Funktion over():
    document.grafik.src = img_over.src
Die src-Eigenschaft der Grafik mit dem name-Attribut "grafik" wird also auf die src-Eigenschaft der Variablen img_over gesetzt. Das bringt zwar in diesem Beispiel keine Vorteile, aber Sie sollten das Verfahren einmal gesehen haben. Wenn die Grafikabteilung Ihrer Firma mal wieder besonders kreative Dateinamen gewählt hat, kann dieses Vorgehen durchaus nützlich sein, da Sie dann wenigstens brauchbare Variablennamen vergeben können. Die Animation kann ebenso schnell angepasst werden. Da aber schöner Code herauskommen soll, wird hier ein wenig mehr Aufwand getrieben. Die Namen und auch die URLs der einzelnen Grafiken sollen in Variablen gespeichert werden. Dies hat wieder den Vorteil, dass ein größerer Personenkreis das Skript bearbeiten kann, indem einfach die Werte der globalen Variablen geändert werden. Im ersten Schritt soll eine Funktion geschrieben werden, die eine Reihe von Grafiken in den Cache lädt. Die URLs der Grafiken werden dabei als Parameter an die Funktion übergeben. Wie man die Anzahl der übergebenen Parameter ermittelt, ist einfach: NameDerFunktion.arguments. length. Der Rest ist schnell geschrieben:
    function preload() {
       var img;
       for (var i=0; i<preload.arguments.length; i++) {
          img = new Image();
          i.src = preload.arguments[i];
       }
    }
Diese Funktion lädt alle übergebenen Grafiken in den Cache. Leider kann man nicht über den Variablennamen auf die Grafik zugreifen, da lediglich eine Variable verwendet wird. Ohne Fleiß kein Preis: In diesem Beispiel sollen die Image-Variablen für die Animation auch in einem Array gespeichert werden. Diese Variablen sollen auch von anderen Funktionen aus angesprochen werden können, müssen also als global definiert werden.
    var bildvariablen = new Array();
    function preload() {
       var img
       for (var i=0; i<preload.arguments.length; i++) {
          img = new Image();
          img.src = preload.arguments[i];
          bildvariablen[i] = img;
       }
    }
Schließlich muss nur noch die Funktion animation() angepasst werden – hier wird auf die Variablen der Grafiken zugegriffen und nicht direkt auf deren URL.
    function animation() {
       document.ani.src = bildvariablen[naechstesBild];
       naechstesBild++;
       if (naechstesBild==bilder.length) {
          naechstesBild = 0;
       }
       setTimeout("animation();", verzoegerung);
    }
<< zurück | <top> | vor >>
Zum Katalog
JavaScript und AJAX bestellen
Ihre Meinung?
Wie hat Ihnen das <openbook> gefallen? Ihre Meinung
Buchtipps
| JavaScript und AJAX - Das Video-Training
| Webseiten programmieren und gestalten
| XHTML, HTML und CSS
| CSS-Praxis
| AJAX
| PHP 5 und MySQL 5
| TYPO3 4.0
Shopping
Versandkostenfrei bestellen in Deutschland und Österreich Info

Copyright © Galileo Press 2007
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das <openbook> denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

[Galileo Computing]
Galileo Press, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, info@galileo-press.de