Rheinwerk Computing < openbook > Rheinwerk 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
Rheinwerk 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


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


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

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

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


Rheinwerk 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 Rheinwerk-Shop
Neuauflage: JavaScript
Neuauflage: JavaScript
bestellen
 Ihre Meinung?
Wie hat Ihnen das Openbook gefallen?
Ihre Meinung

 Buchtipps
Zum Rheinwerk-Shop: jQuery






 jQuery


Zum Rheinwerk-Shop: Einstieg in JavaScript






 Einstieg in JavaScript


Zum Rheinwerk-Shop: Responsive Webdesign






 Responsive Webdesign


Zum Rheinwerk-Shop: Suchmaschinen-Optimierung






 Suchmaschinen-
 Optimierung


 Lieferung
Versandkostenfrei bestellen in Deutschland, Österreich und der Schweiz
InfoInfo




Copyright © Rheinwerk Verlag GmbH 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.


Nutzungsbestimmungen | Datenschutz | Impressum

Rheinwerk Verlag, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de

Cookie-Einstellungen ändern