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.4 Erweiterung der Navigation  downtop

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.


Galileo Computing

11.4.1 Vorbereitungen  downtop

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

gp  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).
gp  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.
gp  Die Funktion klapp_auf() muss dahingehend geändert werden, dass der geladene Menüpunkt auch fett dargestellt wird.
gp  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;

Galileo Computing

11.4.2 Leichte Änderungen  downtop

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

Galileo Computing

11.4.3 Doppeltes Mouseover  downtop

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

Abbildung
Hier klicken, um das Bild zu Vergrößern

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


Galileo Computing

11.4.4 Das komplette Beispiel im Überblick  toptop

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
  
  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