Anzeige
Tutorialbeschreibung

Javasript und Ajax - Grafiken

Javasript und Ajax - Grafiken

In diesem Kapitel geht es um das verarbeiten von Grafiken. Du lernst leichte Mouse-Over Effekte mit Grafiken kennen und wirst diese auch anwenden können.


Das nun folgende Tutorial ist ein Auszug aus der 7. Auflage des Buches: JavaScript und Ajax von Christian Wenz.

Kapitel 11 Grafiken

Das Image-Objekt ermöglicht einen der beliebtesten JavaScript-Effekte im World Wide Web. Es tauchte zum ersten Mal in einer Beta-Version des Netscape Navigator 3 auf. Damit war es erstmals möglich, mit JavaScript einzelne Grafiken eines HTML-Dokuments anzusprechen. Besonders pfiffig – und praktisch – war die Möglichkeit, Grafiken auszutauschen, was Animationen und andere grafische Effekte ermöglicht.

Zu ungefähr derselben Zeit wurde die Version 3 des Microsoft Internet Explorer veröffentlicht. Da sich das Konkurrenzprodukt aus dem Hause Netscape noch in der Beta-Testphase befand, wurde das Image-Objekt nicht mehr in den JavaScript-Funktionsumfang des Internet Explorer übernommen. Die Macintosh-Variante des »IE3« kam etwas später als das Windows-Pendant heraus, und da sich das Image-Objekt bei Webdesignern großer Beliebtheit erfreute, wurde eine rudimentäre Unterstützung für den flotten Bildertausch in den Browser integriert. Ab Version 4 unterstützt der Internet Explorer übrigens auf allen Plattformen das Image-Objekt, und zwar vollständig.

Mittlerweile ist allerdings jede Vorsicht unangebracht, da alle halbwegs modernen JavaScript-fähigen Browser das Objekt unterstützen.


11.1 Bildlein-Wechsle-Dich 
topBilder

Doch was war es, das den Webdesignern so gut am Image-Objekt gefiel? JavaScript wurde bis dato hauptsächlich für Laufschriften und für Formulare benutzt. Hier war es zum ersten Mal auch möglich, mit JavaScript grafische Effekte zu schaffen. Eine der Hauptanwendungen wird lapidar mit »Mouseovers« bezeichnet. Fährt die Maus über eine Grafik, so ändert diese ihre Gestalt; befindet sich die Maus dann nicht mehr über der Grafik, nimmt diese wieder ihre ursprüngliche Gestalt an.

Zwar ist es nicht möglich, eine Grafik zu manipulieren (etwa die Farbpalette zu verändern o.  Ä.), aber man kann die Grafik einfach austauschen. In Abbildung 11.1 sehen Sie zwei Grafiken, galileo_over.gif und galileo_out.gif. Unser Ziel ist es nun, die Grafik galileo_out.gif anzuzeigen. Nur wenn sich der Mauszeiger über der Grafik befindet, soll die Grafik galileo_over.gif angezeigt werden.

AbbildungBilder

Hier klicken, um das Bild zu Vergrößern

Abbildung 11.1     Die beiden Grafiken für den Mouseover-Effekt

Der folgende Code erfüllt die Anforderungen; eine Erläuterung folgt anschließend.

<html>
<head>
<title>Bildlein-Wechsle-Dich</title>
<script type="text/javascript"><!--
function over(){
   document.grafik.src = "galileo_over.gif";
}
function out(){
   document.grafik.src = "galileo_out.gif";
}
//--></script>
</head>
<body>
<a href="http://www.galileo-press.de/">
   <img src="galileo_out.gif" name="grafik"
   onmouseover="over();" onmouseout="out();" />
</a>
</body>
</html>

Wenn Sie überprüfen möchten, ob der Webbrowser überhaupt das Image-Objekt unterstützt, können Sie das wie folgt tun:

if (document.images) {
   // mit dem Image-Objekt arbeiten
}

Wenn es das Image-Objekt gibt, hat document.images einen Wert ungleich false – die if-Bedingung ist also erfüllt. Mit diesem kleinen Trick werden wir im Verlaufe dieses Buches noch an der einen oder anderen Stelle überprüfen, ob ein Browser ein bestimmtes Feature erfüllt oder nicht.


11.1.1 Zugriff auf Grafiken 
topBilder

Es gibt mehrere Möglichkeiten, auf Grafiken in einem HTML-Dokument zuzugreifen:

gpBilder
 
document.grafikname
gpBilder
 
document.images[grafikname]
gpBilder
 
document.images[grafiknummer]

Hierbei steht grafikname für den Wert des name-Attributs der jeweiligen Grafik und grafiknummer für die laufende Nummer der Grafik im HTML-Dokument. Da alle Grafiken im Array document.images gespeichert werden, beginnt die Zählung bei 0.

Im Beispielcode von oben kann man also die Grafik folgendermaßen ansprechen:

gpBilder
 
document.grafik
gpBilder
 
document.images["grafik"]
gpBilder
 
document.images[0]

In der Regel entscheidet man sich für die erste Methode; achten Sie also darauf, Ihren Grafiken eindeutige und einprägsame name-Attribute zu geben, und verwenden Sie dabei keine gefährlichen Zeichen wie etwa Punkte (dann müsste man Methode 2 oder 3 zum Ansprechen der Grafik verwenden).

Die interessanteste und auch wichtigste Eigenschaft des Image-Objekts ist src: Das ist die URL der Grafik. Mit JavaScript hat man sowohl Lese- als auch Schreibzugriff auf diese Eigenschaft – ändert man also ihren Wert, wird die neue Grafik geladen. Das Thema »Dynamisches HTML« ist allerdings erst in Kapitel 17 an der Reihe. Sie können so nur eine Grafik durch eine andere austauschen; Rahmenparameter wie etwa Breite, Höhe und Position der Grafik können nicht verändert werden. Sie sollten also stets gleich große Grafiken verwenden; andernfalls wird die neue Grafik gestaucht oder gestreckt dargestellt.

Somit sind zwei Zeilen des obigen Codes erklärt: Mit document.grafik. src="galileo_over.gif" wird die Grafik galileo_over.gif anstelle der alten Grafik geladen und dargestellt; analog erklärt sich die Wirkungsweise von document.grafik.src="galileo_out.gif".

Die beiden Funktionen over() und out() werden durch die Event-Handler onmouseover und onmouseout aufgerufen. Sie erinnern sich: Wie der Name schon andeutet, wird der erste Event-Handler tätig, wenn die Maus über das Objekt (hier: den Link) fährt, und onmouseout tritt in Aktion, wenn die Maus das Objekt (den Link) wieder verlässt.

»Nur« neuere Browser (Internet Explorer ab 4, Netscape ab 6) unterstützen die Event-Handler onmouseover und onmouseout beim <img>-Tag; wenn also nicht verlinkte Grafiken mit einem Mouseover-Effekt versehen werden sollen, muss – für maximale Browserkompatibilität – um die Grafik herum ein Link (etwa mit href="#") gebaut werden. Man kann trefflich darüber streiten, ob das heutzutage auch noch notwendig ist. Da aber eine grafische Veränderung meist mit einem Link einhergeht (ansonsten ist es oftmals sehr verwirrend für die Nutzer), kann man diesen Ansatz zumindest in Erwägung ziehen.

 

 

11.2 Animierte JPEGs 
topBilder

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 
topBilder

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);
}

11.3 Animierte Navigation 
topBilder

Der letzte Teil dieses Kapitels ist einem etwas umfangreicheren Beispiel gewidmet: einer animierten Navigation. Die Kernidee besteht hierbei darin, dass der Benutzer wie beim Menü eines Browsers die Oberbegriffe oder Kategorien angezeigt bekommt. Fährt er mit der Maus über einen der Begriffe, klappt das Menü nach unten aus, und der Benutzer kann einen der Menüpunkte auswählen. In Abbildung 11.2 sehen Sie, wie das Beispielmenü aussieht, wenn alle Kategorien ausgeklappt sind; in Abbildung 11.3 sehen Sie, wie das Menü in nicht ausgeklapptem Zustand aussieht. Wie Sie ja bereits wissen, lässt sich (mit den bisher bekannten JavaScript-Mitteln) keine Grafik irgendwo auf einer HTML-Seite platzieren. Sie müssen also für jede Stelle des ausgeklappten Menüs eine Füllgrafik (am besten als transparentes GIF) verwenden.

Bilder

Abbildung 11.2     Das vollständig ausgeklappte Menü

Bilder

Abbildung 11.3     Das vollständig eingeklappte Menü

Folgende Punkte sind nun nacheinander abzuarbeiten:

gpBilder
 
Fährt der Benutzer mit der Maus über eine Kategorie, so muss diese ausgeklappt werden (und natürlich müssen eventuell ausgeklappte Kategorien wieder eingeklappt werden).
gpBilder
 
Klickt der Benutzer auf einen einzelnen Menüpunkt, so soll die entsprechende HTML-Seite aufgerufen werden. Dazu muss natürlich überprüft werden, ob die entsprechende Kategorie überhaupt ausgeklappt ist. Denken Sie daran, dass der HTML-Link vorhanden ist, egal ob gerade ein Menüpunkt angezeigt wird oder stattdessen nur die transparente Füllgrafik erscheint.


11.3.1 Vorüberlegungen  

Den kompletten HTML- und JavaScript-Code für dieses Beispiel finden Sie am Ende dieses Kapitels. Im Folgenden werden nur die wesentlichen Elemente vorgestellt. Bevor Sie sich ans Programmieren begeben, sollten Sie sich Gedanken über Konventionen für die Dateinamen und name-Attribute der Grafiken machen; dann sparen Sie sich später einiges an Programmieraufwand. Auch die Namen der JavaScript-Funktionen sollten wohlüberlegt sein. Folgenden Vorschlag kann ich Ihnen anbieten:

gpBilder
 
In diesem Beispiel gibt es zwei Kategorien: die erste mit drei Unterpunkten, die zweite mit vier Unterpunkten. Die Menügrafiken haben den Namen menu_X_Y.gif, und das name-Attribut heißt menu_X_Y, wobei X die Nummer der Kategorie (also 1 oder 2) und Y die Nummer des Unterpunkts ist (von 1 bis 3 bzw. von 1 bis 4). Die transparente Grafik (am besten 1 x 1 Pixel groß, dann ist sie kleiner) heißt leer.gif. Die Oberbegriffe der Kategorien haben den Namen menu_X, wobei X wiederum die Nummer der Kategorie ist.
gpBilder
 
Wenn die Maus über einen Kategorienamen fährt, wird die JavaScript-Funktion klapp_auf(X) aufgerufen; wenn der Mauszeiger die Grafik wieder verlässt, wird klapp_zu(X) aufgerufen. Auch hier bezeichnet X wieder die Nummer der Kategorie.
gpBilder
 
Wenn die Maus über einen einzelnen Menüpunkt fährt, wird die JavaScript-Funktion menue_in(X, Y) aufgerufen, beim Verlassen menue_out (X, Y). Wenn der Benutzer auf einen Menüpunkt klickt, wird die Funktion click(X, Y) aufgerufen. X und Y stehen – Sie haben es erraten – für die Kategorienummer und die Menüpunktnummer.

In globalen Variablen werden die folgenden Werte gespeichert:

gpBilder
 
die Nummer der aktuell ausgeklappten Kategorie,
gpBilder
 
die URLs, auf die die einzelnen Menüpunkte verweisen, und
gpBilder
 
außerdem noch eine ID, die – der aufmerksame Leser wird es wissen – auf die Verwendung von Timeouts hindeutet.

Die globalen Informationen sollten wieder in einem exponierten Block des Dokuments abgelegt werden, damit auch andere Programmierer diese verändern können.

Beginnen wir also mit den globalen Variablen:

var urls = new Array( new Array("seite1–1.htm", "seite1–2.htm", "seite1–3.htm"), new Array("seite2–1.htm", "seite2–2.htm", "seite2–3.htm", "seite2–4.htm"); ); var ausgeklappt = 0; //Startwert für ausgeklappte Rubrik var ID;


11.3.2 Auf- und Zuklappen  

Die Kernfunktion dieses Programms besteht im Auf- und Zuklappen der einzelnen Kategorien. Das ist jedoch gar nicht so schwer. Das Zuklappen ist hierbei besonders einfach: Jede der Kategoriegrafiken wird durch eine Füllgrafik ersetzt. Erinnern Sie sich daran, dass die name-Attribute der Menüpunkte das Format menu_X_Y haben, wobei X die Kategorienummer und Y die Menüpunktnummer ist. Die Anzahl der einzelnen Menüpunkte bekommt man aus dem Array urls; bedenken Sie hierbei, dass man auf urls[1] zugreifen muss, wenn man sich mit der zweiten Kategorie beschäftigen will.

function klapp_zu(X) { ausgeklappt = 0; //globale Variable zurücksetzen for (var i=1; i<=urls[X-1].length; i++) { //alle Menüpunkte eval("document.menu_" + X + "_" + i + ".src = 'leer.gif'"); } }

Beim Aufklappen muss man einige kleine Hürden umgehen. Als Erstes muss die gerade aufgeklappte Kategorie wieder zugeklappt werden, und dann müssen die einzelnen Grafiken an die richtige Stelle gesetzt werden.

function klapp_auf(X){ if (ausgeklappt !=0 && ausgeklappt != X) { klapp_zu(ausgeklappt); } ausgeklappt = X; //erst jetzt, nach dem Zuklappen, setzen! for (var i=1; i<=urls[X-1].length; i++) { eval("document.menu_" + X + "_" + i + ".src = 'menu_" + X + "_" + i + ".gif'"); } }

Anstelle von eval() kann natürlich auch document.images verwendet werden; innerhalb der eckigen Klammern geben Sie dann das name-Attribut der gewünschten Grafik an.


11.3.3 Die einzelnen Menüpunkte  

Was passiert, wenn sich die Maus über einem Menüpunkt befindet, und was passiert vor allem, wenn die Maus den Menüpunkt wieder verlässt? Im Gegensatz zu den meisten Menüs einer grafischen Benutzeroberfläche sollte das Menü wieder eingeklappt werden, wenn die Maus das Menü verlässt. Da man (zumindest mit den bisher bekannten Mitteln) nicht feststellen kann, ob der Benutzer den Menüpunkt nach oben verlässt (dann kann das Menü natürlich aufgeklappt bleiben) oder nach links oder rechts, sollte es zuklappen. Aus diesem Grund ist folgendes Vorgehen empfehlenswert: Wenn der Benutzer einen Menüpunkt verlässt, wird die Funktion klapp_zu() aufgerufen. Um aber zu verhindern, dass das Menü auch zugeklappt wird, wenn die Maus nach oben oder unten fährt, wird über einen Timeout diese Funktion erst nach einer kurzen Zeitspanne (etwa 50 bis 100 Millisekunden) aufgerufen. Wenn die Maus über einen Menüpunkt fährt, wird dieser Timeout wieder eliminiert. Beachten Sie, dass die Funktion klapp_auf() auch abgeändert wird, da die Funktion auch gegebenenfalls eine andere aktive Sektion zuklappt.

Fassen wir diese Punkte zusammen:

gpBilder
 
In der Funktion menue_in() wird der Timeout gelöscht und gegebenenfalls die vorangegangene Rubrik zugeklappt.
gpBilder
 
In der Funktion menue_out() wird ein Timeout gesetzt, der die Sektion zuklappt.
gpBilder
 
In der (bereits programmierten) Funktion klapp_auf() muss der Timeout ebenfalls gelöscht werden.

function menue_in(X, Y) { clearTimeout(ID); if (X != ausgeklappt) { klapp_zu(X); } } function menue_out(X, Y) { eval("ID = setTimeout('klapp_zu(" + X + ")', 50)"); } function klapp_auf(X) { clearTimeout(ID); if (ausgeklappt != 0 && ausgeklappt != X) { klapp_zu(ausgeklappt); } ausgeklappt = X; //erst jetzt, nach dem //Zuklappen, setzen! for (var i=1; i<=urls[X-1].length; i++) { eval("document.menu_" + X + "_" + i + ".src = 'menu_" + X + "_" + i + ".gif'"); } }


11.3.4 Verlinkung der Menüpunkte  

Dieser Punkt ist wohl der einfachste in diesem Beispiel, man muss nur beachten, dass der Array-Index bei 0 beginnt, die Kategorien jedoch bei 1 beginnen. Ebenso muss der Menüpunkt natürlich eingeblendet sein, damit der Link aktiv ist.

function click(X, Y) { if (X == ausgeklappt) { window.location.href = (urls[X-1])[Y-1]; } }


11.3.5 Einbau in die HTML-Datei 
topBilder

So schön das Beispiel (hoffentlich) auch bei Ihnen funktionieren wird, so schlecht sieht es aus, wenn Sie einen älteren Browser verwenden oder JavaScript deaktivieren. Aus diesem Grund folgt hier eine Strategie, wie man ein möglichst großes Publikum bedient. Natürlich könnten Sie eine JavaScript-Version und eine HTML-Version der Navigation erstellen, aber in diesem Fall lohnt es sich, alles auf einer Seite zu halten.

gpBilder
 
Im HTML-Dokument selbst sind alle Kategorien ausgeklappt. Damit werden zum einen alle Grafiken schon einmal in den Cache geladen, und zum anderen bekommen auch ältere Browser alles zu sehen.
gpBilder
 
Nach dem Laden des Dokuments wird versucht, alle Kategorien zuzuklappen. Dies wird nur von Browsern erledigt, die JavaScript aktiviert haben und das Image-Objekt auch unterstützen. Der entsprechende Code sieht folgendermaßen aus:
<body onload="for (var i=1; i<=urls.length; i++) klapp_zu(i);">
gpBilder
 
Die einzelnen Menüpunkte benutzen nicht das JavaScript-Pseudoprotokoll, um die Funktion click() aufzurufen, sondern den Event-Handler onclick. Das href-Attribut wird auf die korrekte (HTML-)Zieladresse gesetzt. Damit aber neuere Browser nicht die HTML-Seite aufrufen, endet der onclick-Event-Handler mit return false, wenn der Browser das Image-Objekt kennt. Sie wissen schon aus den vorangegangenen Kapiteln, dass dann der HTML-Link nicht ausgeführt wird. Dies ist mit einem relativ langen Event-Handler zu erledigen; um sich aber Schreibarbeit zu sparen, sollte der onclick-Event-Handler auf return img() enden. Die Funktion img() sieht folgendermaßen aus:
function img() {
   return (document.images) ? false : true;
}

11.4 Erweiterung der Navigation 
topBilder

Die Navigation funktioniert ja schon ganz gut, aber ganz zufrieden sind wir noch nicht. Zum einen soll die Navigation auch auf Unterseiten verwendet werden; der Link der betreffenden Unterseite auf sich selbst sollte dann natürlich inaktiv sein. Aber ein kleiner Effekt soll zusätzlich noch eingebaut werden: Fährt der Benutzer mit der Maus über einen Menüpunkt, so soll dieser fett dargestellt werden. Der Menüpunkt, der die gerade aktive Seite bezeichnet, soll von vornherein fett sein.


11.4.1 Vorbereitungen  

Was muss geändert werden, damit das so funktioniert?

gpBilder
 
Die Funktion menue_in() muss dahingehend geändert werden, dass der aktive Menüpunkt in fetter Schrift dargestellt wird. Ist der aktive Menüpunkt gleichzeitig der geladene Menüpunkt, so muss keine Aktion erfolgen (wir wollen ja effizient programmieren).
gpBilder
 
Die Funktion menue_out() muss dahingehend geändert werden, dass der zuvor aktive Menüpunkt wieder normal dargestellt wird – außer natürlich, es handelt sich um den aktiven Menüpunkt; der muss fett bleiben.
gpBilder
 
Die Funktion klapp_auf() muss dahingehend geändert werden, dass der geladene Menüpunkt auch fett dargestellt wird.
gpBilder
 
Die Funktion click() muss dahingehend geändert werden, dass beim Klicken auf den gerade aktiven Menüpunkt nichts passiert.

Auch hierzu sind ein paar Vorbereitungen notwendig. Da die Menüpunkte Grafiken sind, handelt es sich bei den in fetter Schrift dargestellten Menüpunkten ebenfalls um Grafiken. Diese haben folgende Namenskonvention: Der fette Menüpunkt in Kategorie Nummer X und (innerhalb dieser Kategorie) Nummer Y hat den Grafiknamen menu_X_Y_f.gif (f steht für fett).

Schließlich werden zwei weitere globale Variablen eingeführt, die dann auch von anderen Leuten geändert werden können: die Nummer der Kategorie und die Nummer des Menüpunkts, der gerade geladen ist. Auf jeder Unterseite können und müssen diese Nummern individuell angepasst werden. Es ist aber einfacher, zwei Zahlenwerte zu ändern als irgendwelche Parameter innerhalb der JavaScript-Funktionen. Folgendermaßen würde es aussehen, wenn der zweite Menüpunkt der ersten Kategorie geladen ist:

var kategorie = 1; var menuepunkt = 2;


11.4.2 Leichte Änderungen  

Der letzte Punkt unserer To-do-Liste – der inaktive Link – ist auch gleichzeitig der einfachste. Es wird einfach überprüft, ob der entsprechende Menüpunkt angeklickt worden ist, und falls ja, passiert eben nichts.

function click(X, Y) { if (X == ausgeklappt && (X != kategorie || Y != menuepunkt)) { location.href = (urls[X-1])[Y-1]; } }

Beim Ausklappen ist auch eine Kleinigkeit zu beachten: Beim geladenen Menüpunkt muss die fette Variante der Grafik angezeigt werden. Das war dann aber auch schon alles, worüber man stolpern könnte. Unter der lokalen Variablen suffix wird gespeichert, was an den Grafiknamen angehängt werden muss. Das ist "_f", wenn es sich um den geladenen Menüpunkt handelt, ansonsten nichts.

function klapp_auf(X) { clearTimeout(ID); if (ausgeklappt != 0 && ausgeklappt != X) { klapp_zu(ausgeklappt); } ausgeklappt = X; //erst jetzt, nach dem Zuklappen, setzen! for (var i=1; i<=urls[X-1].length; i++) { suffix = (X == kategorie && i == menuepunkt) ? "_f" : ""; eval("document.menu_" + X + "_" + i + ".src = 'menu_" + X + "_" + i + suffix + ".gif'"); } }


11.4.3 Doppeltes Mouseover  

Die Funktion menue_in() wird folgendermaßen geändert: Ist der aktive Menüpunkt gleichzeitig der geladene Menüpunkt, findet kein Mouseover statt; ansonsten wird die fette Variante des aktiven Menüpunkts dargestellt.

function menue_in(X, Y) { clearTimeout(ID); if (X != ausgeklappt) { klapp_zu(X); } else { if (X != kategorie || Y != menuepunkt) { eval("document.menu_" + X + "_" + Y + ".src = 'menu_" + X + "_" + Y + "_f.gif'"); } } }

In der Funktion menue_out() wird statt der fetten nun die normale Variante des Menüpunkts angezeigt, außer es handelt sich um den geladenen Menüpunkt.

function menue_out(X, Y) { if (X != kategorie || Y != menuepunkt) { eval("document.menu_" + X + "_" + Y + ".src = 'menu_" + X + "_" + Y + ".gif'"); } eval("ID = setTimeout('klapp_zu(" + X + ")', 50)"); }

Bilder

Abbildung 11.4     Die erweiterte Version: Der aktuelle Menüpunkt wird fett dargestellt.


11.4.4 Das komplette Beispiel im Überblick 
topBilder

Auf der Buch-DVD finden Sie die gesamte Datei im Überblick, einschließlich des Beispiel-HTML-Codes. So können Sie sich einiges an Tipparbeit sparen.



11.5 Tipps aus der Praxis 
topBilder

In diesem letzten Abschnitt dieses Kapitels über das Image-Objekt möchte ich Ihnen noch ein paar Tipps aus der Praxis geben, damit Sie Fehlermeldungen vermeiden oder Ihre Seiten mit noch mehr Funktionalität versehen können. Das Image-Objekt wird sehr gern eingesetzt, und ein paar Fehler werden immer wieder gemacht, ein paar Fragen immer wieder gestellt. Die folgenden zwei Abschnitte beantworten hoffentlich die Fragen, die Sie noch haben.


11.5.1 Vorladen – aber richtig  

Sie haben sich vielleicht gefragt, warum beim Beispiel zum Vorladen die Funktion preload() nicht mittels <body onload="preload();"> aufgerufen worden ist, sondern noch im <head>-Abschnitt des HTML-Dokuments. Das hat einen einfachen Grund. Gehen Sie von einer langsameren Verbindung oder von einem umfangreichen Dokument aus. Ein Teil des HTML-Dokuments wurde schon übertragen und ist auch schon vom Browser dargestellt worden. Hier ist besonders der Internet Explorer sehr schnell, während manche andere Browser Tabellen erst dann anzeigen, wenn sie vollständig übertragen worden sind. Aber zurück zum Beispiel: Ein Teil der Seite ist also schon geladen und wird dargestellt – und die Event-Handler in diesem Teil sind natürlich aktiv. Wie es der Zufall so will, fährt der Benutzer jetzt schon über eine mit Mouseover versehene Grafik. Im Beispiel von oben würde nun die folgende Funktion aufgerufen werden:

function over() { document.grafik.src = img_over.src; }

Die Variable img_over wird aber erst in der Funktion preload() korrekt gesetzt. Das ist schlecht, wenn die Funktion erst mit dem onload-Event-Handler aufgerufen wird; wie Sie sich erinnern, tritt dieser erst in Aktion, wenn das gesamte HTML-Dokument übertragen worden ist. Es gäbe also in diesem Fall unter Umständen eine Fehlermeldung. Um dies zu vermeiden, rufen Sie Ihre Vorladefunktion noch vor dem ersten <img>-Tag auf!


11.5.2 Ladestand einer Grafik  

JavaScript bietet dem Benutzer eine bequeme Möglichkeit festzustellen, wie weit eine Grafik schon geladen ist. Interessant wird das beispielsweise bei der Diashow aus Kapitel 10. Wenn Sie die Diashow über eine langsame Netzwerkverbindung abspielen, kann es sein, dass umfangreiche Grafiken auf den einzelnen Seiten der Show noch nicht vollständig geladen sind, bevor die nächste Seite der Show angezeigt wird. Es wäre hier also praktisch, wenn die Grafiken alle schon vorher im Browsercache wären. Auch beim Beispiel mit der JPEG-Animation aus diesem Kapitel ist das wünschenswert. Wir wollen für das letztere Beispiel eine Lösung konstruieren, die analog auch für das Diashow-Beispiel eingesetzt werden kann.

Der Trick besteht darin, eine Einstiegsseite zu programmieren, auf der alle Grafiken schon einmal geladen werden. Nun könnte man einerseits den Benutzer nach Ablauf einer gewissen Zeitspanne auf die nächste Seite weiterleiten, aber das ist keine sehr flexible Lösung. Bei einer langsamen Verbindung reicht die Zeit nicht aus, und bei einer schnellen Verbindung dauert das Warten zu lange.

Ein erster Ansatz besteht darin, den Event-Handler onload zu benutzen. Den gibt es auch bei Grafiken. Sobald bei jeder Grafik der onload-Event-Handler ausgeführt worden ist, kann auf die nächste Seite weiterverzweigt werden. Zudem sollte man nach einer bestimmten Zeit ohnehin zur nächsten Seite übergehen, um die Geduld des Benutzers nicht allzu sehr zu strapazieren.

<html> <head> <meta http-equiv="refresh" content="30;url=animation.html" /> <!-- nach 30 Sekunden wird die Seite animation.html geladen --> <title>Animation vorbereiten</title> <script type="text/javascript"><!-- var geladen = 0; //Anzahl der fertig geladenen Grafiken function fertig() { geladen++; if (geladen==4) { //wenn alle Grafiken geladen sind location.href = "animation.html"; } } //--></script> </head> <body> <h3>Animation lädt... Bitte warten...</33> <img src="ani1.jpg" onload="fertig();" width="1" height="1" /> <img src="ani2.jpg" onload="fertig();" width="1" height="1" /> <img src="ani3.jpg" onload="fertig();" width="1" height="1" /> <img src="ani4.jpg" onload="fertig();" width="1" height="1" /> </body> </html>

Jedes Mal, wenn eine Grafik fertig geladen worden ist, wird ein Zähler um eins erhöht, und es wird überprüft, ob damit die magische Zahl 4 (die Anzahl der Grafiken) erreicht worden ist.

Dieses Vorgehen funktioniert unter gewissen Umständen nicht – vor allem auf älteren Rechnern mit wenig Speicher. Wenn zwei Grafiken quasi gleichzeitig vollständig geladen worden sind und dadurch die Funktion fertig() zweimal aufgerufen wird, kann es vorkommen, dass einer der Aufrufe verschluckt wird. Wie gesagt, das kommt ganz selten vor, aber es gibt Zeugen ...

Hier hilft Ihnen vielleicht die Eigenschaft complete eines Image-Objekts. Dieses gibt an, ob eine Grafik vollständig geladen worden ist (true) oder nicht (false). In der Funktion fertig() wird also jetzt kein Zähler heraufgesetzt, sondern überprüft, ob alle Grafiken vollständig geladen worden sind. Falls ja, wird zur Animationsseite übergegangen. Auch diese Eigenschaft wird von den verschiedenen Browsern unterschiedlich gut (oder schlecht) unterstützt.

Im folgenden Listing lernen Sie außerdem noch eine Anwendungsmethode für die Event-Handler onabort und onerror kennen. onabort tritt dann in Aktion, wenn der Benutzer das Laden mit der Schaltfläche Stop abbricht; onerror wird aktiv, wenn ein Fehler bei der Übertragung auftritt (beispielsweise, wenn die Grafikdatei nicht existiert).

<html> <head> <meat http-equiv="refresh" content="30;url=animation.html" /> <!-- nach 30 Sekunden wird die Seite animation.htm geladen --> <title>Animation vorbereiten</title> <script type="text/javascript"><!-- function fertig() { if (document.images[0].complete && document. images[1].complete && document.images[2].complete && document.images[3].complete) { location.href = "animation.html"; } } function abbruch() { alert("Sie wollen das Laden abbrechen? Na gut, wir leiten Sie weiter..."); location.href = "animation.html"; } function fehler() { alert("Beim Laden einer der Grafiken ist ein Fehler aufgetreten. Wir leiten Sie trotzdem weiter..."); location.href = "animation.html"; } //--></script> </head> <body> <h1>Animation lädt... Bitte warten...</h1> <img src="ani1.jpg" onload="fertig();" onAbort="abbruch();" onError="fehler();" width="1" height="1" /> <img src ="ani2.jpg" onload="fertig();" onAbort="abbruch();" onError="fehler();" width="1" height="1" /> <img src ="ani3.jpg" onload="fertig();" onAbort="abbruch();" onError="fehler();" width="1" height="1" /> <img src ="ani4.jpg" onload="fertig();" onAbort="abbruch();" onError="fehler();" width="1" height="1" /> </body> </html>

Leider wird onerror nicht mitgeteilt, welche der Grafiken beim Laden einen Fehler hatte. Man könnte diese Information aber als Parameter an die Funktion fehler() übergeben.

Bilder

Abbildung 11.5     Die Meldung, die erscheint, wenn eine der Grafiken nicht existiert


11.5.3 Fortschrittsanzeige 
topBilder

Flash-Filme können es – mit etwas Mühe. Normale HTML-Seiten können es auch – in der Statuszeile des Browsers. Die Rede ist von Fortschrittsanzeigen, die angeben, wie viel von dem Inhalt einer Seite oder eines Films schon geladen worden ist. In Bezug auf Grafiken ist das mit der complete-Eigenschaft von Grafiken möglich.

Zunächst erstellen wir eine Fortschrittsanzeige, die angibt, wie viele Grafiken der aktuellen Seite bereits übertragen worden sind. Das Vorgehen ist das Folgende:

gpBilder
 
Eine Funktion durchläuft alle Grafiken in der HTML-Seite und überprüft die complete-Eigenschaft.
gpBilder
 
Die Anzahl der bereits vollständigen Grafiken wird durch die Anzahl der insgesamt zu ladenden Grafiken geteilt.
gpBilder
 
Dieser Wert wird in der Statuszeile ausgegeben.
gpBilder
 
Falls der Wert noch nicht 100  % entspricht, wird die Funktion per Timeout wieder aufgerufen.

function fortschritt() { var gesamt = document.images.length; var geladen = 0; for (var i=0; i<gesamt; i++) { if (document.images[i].complete) { geladen++; } } if (gesamt > 0) { window.status = "Geladen: " + Math.round(100*geladen/gesamt) + "%"; } if (gesamt > geladen) { setTimeout("fortschritt();", 500); } }

Beachten Sie, dass Sie die Funktion erst aufrufen dürfen, wenn das HTML-Dokument vollständig geladen worden ist. Nachfolgend sehen Sie ein exemplarisches HTML-Dokument – mit Statusanzeige:

<html> <head> <title>Fortschrittsanzeige</title> <script type="text/javascript"><!-- function fortschritt() { var gesamt = document.images.length; var geladen = 0; for (var i=0; i<gesamt; i++) { if (document.images[i].complete) { geladen++; } } if (gesamt > 0) { window.status = "Geladen: " + Math.round(100*geladen/gesamt) + "%"; } if (gesamt > geladen) { setTimeout("fortschritt();", 500); } } //--></script> </head> <body

onload="fortschritt();"

> <img src="1.png" /><img src="2.png" /><img src="3.png" /> </body> </html>

Auf der Buch-DVD finden Sie noch eine weitere Datei (warten.php), die jedoch PHP voraussetzt. Anstelle von Grafikdateien lädt dort der JavaScript-Code eine PHP-Datei, die ein paar Sekunden wartet und dann erst die Dateien 1.png bis 3.png lädt. Somit geht die Fortschrittsanzeige nur schrittweise voran, und der Effekt ist besser zu beobachten.

Was für die aktuelle Seite gilt, kann auch für den Rest der Website gelten. Zwar ist es unsinnig, die Grafiken für die gesamte Site im Browser-Cache zu halten, aber zumindest oft verwendete Grafiken sollten Sie möglichst früh laden. Dazu gehören:

gpBilder
 
das Firmenlogo (es kommt bestimmt auf jeder Seite vor)
gpBilder
 
Navigationsgrafiken (die auch auf fast jeder Seite verwendet werden)
gpBilder
 
weitere häufig verwendete Grafiken, zum Beispiel Füllgrafiken

Ein möglicher Ansatz besteht darin, diese Grafiken auf der Startseite des Angebots bereits zu laden und nach dem erfolgten Laden erst den Zugang zum restlichen Angebot zu eröffnen.

Dazu muss die Funktion fortschritt() ein wenig umgeschrieben werden (beziehungsweise eine Funktion programmiert werden, die Ähnliches wie fortschritt() leistet), damit Folgendes gewährleistet ist:

gpBilder
 
Der Prozentsatz der bereits vollständig geladenen Grafiken der Webseite wird ermittelt.
gpBilder
 
Dieser Prozentsatz wird zurückgegeben.
gpBilder
 
Eine Funktion gibt den aktuellen Prozentwert an geeigneter Stelle aus.
gpBilder
 
Sobald der Prozentwert 100  % beträgt, wird die Hauptseite des Angebots geladen.

Kommen wir zunächst zu der Funktion, die zurückliefert, wie viele der Grafiken der Webseite bereits vollständig geladen worden sind:

function geladen() { var gesamt = document.images.length; var geladen = 0; for (var i=0; i<gesamt; i++) { if (document.images[i].complete) { geladen++; } } if (gesamt > 0) { return geladen/gesamt; } else { return 1; // 100 Prozent } }

Die Funktion, die den gerade aktuellen Prozentwert regelmäßig ausgibt und bei 100 Prozent die nächste Seite lädt, ist folgendermaßen aufgebaut:

gpBilder
 
Zunächst wird mit geladen() ermittelt, wie viele der Grafiken der aktuellen Seite bereits geladen worden sind:
var geladen = Math.round(100 * geladen());
geladen = "Bitte warten ... " + geladen + "%";
gpBilder
 
Als Nächstes wird der Wert in einem <div>-Element ausgegeben, wobei wir auf DHTML und getElementById() setzen (mehr dazu erfahren Sie in Kapitel 16:
document.getElementById("geladen").innerHTML = geladen;
gpBilder
 
Sobald 100  % erreicht worden sind, wird die nächste Seite aufgerufen:
if (geladen() == 1) {
   location.href = "homepage.html";
}
gpBilder
 
Falls 100  % noch nicht erreicht sind, wird der Code per Timeout nach kurzer Zeit wieder aufgerufen.

Im Folgenden ist der komplette Code abgedruckt. Die Weiterleitungs-URL wird in einer globalen Variablen gespeichert, um das Skript leicht anpassen zu können.

<html> <head> <title>Fortschrittsanzeige</title> <script type="text/javascript"><!-- function geladen() { var gesamt = document.images.length; var geladen = 0; for (var i=0; i<gesamt; i++) { if (document.images[i].complete) { geladen++; } } if (gesamt > 0) { return geladen/gesamt; } else { return 1; // 100 Prozent } } var url = "homepage.html"; function warten() { var geladenprozent = Math.round(100 * geladen()); geladenprozent = "Bitte warten ... " + geladenprozent + "%"; document.getElementById("geladen").innerHTML = geladenprozent; if (geladen() == 1) { location.href = url; } else { setTimeout("warten()", 500); } } //--></script> </head> <body onload="warten();"> <div id="geladen" style="position: absolute;"> </div> <img src="1.png" width="1" height="1" /> <img src="2.png" width="1" height="1" /> <img src="3.png" width="1" height="1" /> </body> </html>

Beachten Sie, dass die width- und height-Eigenschaften der Grafiken auf "1" gesetzt worden sind, damit die Grafiken dort noch nicht angezeigt werden.

Die Fortschrittsanzeige lässt sich auch grafisch darstellen. Das ist ein wenig komplizierter, und vor allem wird das Ergebnis verfälscht:

gpBilder
 
Die Grafiken zur Anzeige der Fortschrittsanzeige müssen ebenfalls geladen werden.
gpBilder
 
Im schlimmsten Fall werden die restlichen Grafiken vor den Grafiken des Fortschrittsbalkens geladen.

Der Rest läuft wie folgt ab:

gpBilder
 
Es wird eine fünfstufige Fortschrittsanzeige verwendet; jede Grafik entspricht 20 Prozent.
<nobr><img src="rot.png" name="balken1" /><img src="rot.png" name="balken2" />
<img src="rot.png" name="balken3" /><img src="rot.png" name="balken4" />
<img src="rot.png" name="balken5" /></nobr>
gpBilder
 
Dann wird per Timeout der momentane Ladefortschritt bestimmt.
var geladen = geladen();
gpBilder
 
Der Ladefortschritt wird (gerundet) durch zwanzig dividiert. In Abhängigkeit von diesem Ergebnis werden entsprechend viele Grafiken von rot auf grün geschaltet.
var fortschritt = Math.round(5*geladen); // *100 / 20
for (var i=1; i<=fortschritt; i++) {
   document.images["balken"+i].src = "gruen.png";
}
gpBilder
 
Eine weitere Besonderheit: Damit die Fortschrittsanzeige auch komplett bewundert werden kann, erfolgt die Weiterleitung auf die nächste Seite erst nach einer kurzen Verzögerung:
setTimeout("location.href="" + url + """, 500);

Hier sehen Sie das komplette Skript:

<html> <head> <title>Fortschrittsanzeige</title> <script type="text/javascript"><!-- function geladen() { var gesamt = document.images.length; var geladen = 0; for (var i=0; i<gesamt; i++) { if (document.images[i].complete) { geladen++; } } if (gesamt > 0) { return geladen/gesamt; } else { return 1; // 100 Prozent } } var url = "homepage.html"; function warten() { var geladen = geladen(); var fortschritt = Math.round(5*geladen); // *100 / 20 for (var i=1; i<=fortschritt; i++) { document.images["balken"+i].src = "gruen.png"; } if (geladen() == 1) { setTimeout("location.href = "" + url + "";", 500); } else { setTimeout("warten();", 500); } } //--></script> </head> <body onload="warten()"> <nobr><img src="rot.png" name="balken1" /><img src="rot.png" name="balken2" /> <img src="rot.png" name="balken3" /><img src="rot.png" name="balken4" /> <img src="rot.png" name="balken5" /></nobr> <img src="1.png" width="1" height="1" /> <img src="2.png" width="1" height="1" /> <img src="3.png" width="1" height="1" /> </body> </html>

 

Bilder

Abbildung 11.6     Fast alle Grafiken sind schon geladen.

Denken Sie auf jeden Fall daran, dass Sie für Browser ohne Unterstützung des Image-Objekts (das sind eher wenige) oder mit deaktiviertem oder fehlendem JavaScript (das sind schon mehr) auf jeden Fall noch einen Link auf die eigentliche Hauptseite des Angebots zur Verfügung stellen sollten – denn ansonsten bleibt der Benutzer auf der Einstiegsseite hängen.




Das Tutorial ist ein Auszug aus der 7. Auflage des Buches von Christian Wenz:

JavaScript und Ajax - Das umfassende Handbuch
Galileo Computing, 853 Seiten, 8. aktualisierte Auflage

Die Veröffentlichung des Kapitels erfolgt mit freundlicher Genehmigung von Galileo Press.

Mehr Informationen zum aktualisierten Fachbuch für Webentwickler gibt es hier: JavaScript und Ajax
 
Alle Kapitel des Buches:
1 Grundlagen
2 JavaScript-Praxis
3 Professionelles JavaScript
4 Web 2.0 und Ajax
5 Kommunikation
6 Serverseitige Programmierung
7 Sicherheit
8 Praxis
9 Anhang
Bilder


 

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Fidelis_jpg
  • 17.09.2010 - 23:03

Schönes Tutorial, wieder was dazugelernt!

Quote aus dem Tut.:

Dafür wären die Formate JPEG und PNG besser geeignet, wenn sie denn Animationen unterstützen würden (was sie nicht tun).

DOCH TUN SIE ;)

PNGs kann man animieren, hab ein Tutorial darüber gemacht!
Trotzdem gibt es 5 Sterne :P

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 17.01.2009 - 15:01

Sehr schön erklärt, hat mir sehr weitergeholfen und bau es bestimmt bei mir in abgewandelter Form ein. ThX!

Portrait von skyflight1981
x
×
×