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.4 Erweiterung der Navigation 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?
| 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).
| 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.
| Die Funktion klapp_auf() muss dahingehend geändert werden, dass der geladene Menüpunkt auch fett dargestellt wird.
| 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)");
    }
Hier klicken, um das Bild zu Vergrößern Abbildung 11.4 Die erweiterte Version: Der aktuelle Menüpunkt wird fett dargestellt. ### 11.4.4 Das komplette Beispiel im Überblick 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.
<< 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