Galileo Computing < openbook > Galileo Computing - Professionelle Bücher. Auch für Einsteiger.
Professionelle Bücher. Auch für Einsteiger.

 <<   zurück
JavaScript und AJAX von Christian Wenz
Das umfassende Handbuch
Buch: JavaScript und AJAX

JavaScript und AJAX
839 S., mit DVD, 39,90 Euro
Galileo Computing
ISBN 3-89842-859-1
gp Kapitel 11 Grafiken
  gp 11.1 Bildlein-Wechsle-Dich
    gp 11.1.1 Zugriff auf Grafiken
  gp 11.2 Animierte JPEGs
    gp 11.2.1 Eine Animation mit JavaScript
    gp 11.2.2 Bilder in den Cache laden
  gp 11.3 Animierte Navigation
    gp 11.3.1 Vorüberlegungen
    gp 11.3.2 Auf- und Zuklappen
    gp 11.3.3 Die einzelnen Menüpunkte
    gp 11.3.4 Verlinkung der Menüpunkte
    gp 11.3.5 Einbau in die HTML-Datei
  gp 11.4 Erweiterung der Navigation
    gp 11.4.1 Vorbereitungen
    gp 11.4.2 Leichte Änderungen
    gp 11.4.3 Doppeltes Mouseover
    gp 11.4.4 Das komplette Beispiel im Überblick
  gp 11.5 Tipps aus der Praxis
    gp 11.5.1 Vorladen – aber richtig
    gp 11.5.2 Ladestand einer Grafik
    gp 11.5.3 Fortschrittsanzeige


Galileo Computing

11.2 Animierte JPEGs  downtop

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>

Galileo Computing

11.2.1 Eine Animation mit JavaScript  downtop

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();">

Galileo Computing

11.2.2 Bilder in den Cache laden  toptop

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
  
  Zum Katalog
Zum Katalog: JavaScript und AJAX
JavaScript und AJAX
bestellen
 Ihre Meinung?
Wie hat Ihnen das <openbook> gefallen?
Ihre Meinung

 Buchtipps
Zum Katalog: JavaScript und AJAX - Das Video-Training






 JavaScript und AJAX -
 Das Video-Training


Zum Katalog: Webseiten programmieren und gestalten






 Webseiten
 programmieren
 und gestalten


Zum Katalog: XHTML, HTML und CSS






 XHTML, HTML und CSS


Zum Katalog: CSS-Praxis






 CSS-Praxis


Zum Katalog: AJAX






 AJAX


Zum Katalog: PHP 5 und MySQL 5






 PHP 5 und MySQL 5


Zum Katalog: TYPO3 4.0






 TYPO3 4.0


 Shopping
Versandkostenfrei bestellen in Deutschland und Österreich
InfoInfo




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