Ganz allgemein gesagt wird es nötig sein, dass unsere JavaScript-Funktionen einmal wissen, welche Menüzeile denn mit der Maus berührt worden ist, damit sie herausfinden können, was nun neu anzuzeigen ist. Der ganze Event-Mechanismus hilft uns dabei ein Stück weit. Er nennt uns das Element, welches bei der Auslösung des Events massgebend war. An uns liegt es aber wieder, herauszufinden, wo im Menübaum dieses Element steckt.
Ein einfacher und sinnvoller Weg ist es, sämtlichen Hyperlink-Elementen jeweils eine id zu
geben, und zwar auch wieder nicht im HTML-Code, wo wir uns noch vertippen könnten, sondern nachträglich
mit Hilfe der JavaScript-Funktion, genau wie wir's ja auch mit den Event-Handlern getan haben.
Und die id sollte interpretierbar sein. Sinnvoll ist z.B. eine id, die einer
hierarchischen Titel-Nummerierung entspricht und für den zweiten Punkt im ersten Untermenü des dritten
Haputmenüs also z.B. 3.1.2. lautet. Genau das ist hier in die Funktion zuklappen
eingebaut: Beim ersten Aufruf installieren wir nicht nur die Event-Handler für MouseOver und MouseOut,
sondern konstruieren auch gleich die Id und weisen sie den Hyperlink-Elementen zu. Du siehst das in der ersten
Erweiterung im JavaScript.
Wie versprochen, macht uns der Event-Mechanismus das Element zugänglich, welches am Event beteiligt ist.
Die Erweiterung der Funktion aufklappen berücksichtigt dies. Die verschiedenen Stilarten
unterschiedlicher Browser werden mit einer if-Abfrage berücksichtigt, und danach repräsentiert wodenn
das HTML-Element (und damit die Menüzeile), die mit der Maus betreten bzw verlassen wurde. Die
entsprechende Erweiterung wurde in der Funktion aufklappen gemacht.
Nun sieht's also folgendermassen aus:
function zuklappen() {
if(erstmals) {
var zaehler = new Array() ;
zaehler[1] = 0 ;
}
ganzesmenu = document.getElementById(das_menu) ; // auf das Menü zielen
for(i=0 ; i<ganzesmenu.childNodes.length ; i++) {
dieseskind = ganzesmenu.childNodes[i] ;
if(dieseskind.className) {
if(dieseskind.className.substr(0,die_class.length) == die_class) {
diesestufe = dieseskind.className.substr(die_class.length,1) ; // unsere Stufe
if(erstmals) {
dieseskind.onmouseover = aufklappen ; // Event-Handler
dieseskind.onmouseout = zuklappen ; // installieren
diese_id = "" ; // eine neue Id aufbauen:
for(di=1 ; di<9 ; di++) { // Die Id wird aus den
if(di > diesestufe) zaehler[di] = 0 ; // Werten mehrerer Zähler
else { // (einer pro Stufe)
if(di == diesestufe) zaehler[di]++ ; // zusammengesetzt.
diese_id += zaehler[di] + "." ;
}
}
dieseskind.id = diese_id ; // Id zuordnen
}
if(dieseskind.className.substr(die_class.length,1) > "1") {
dieseskind.style.display = "none" ;
}
}
}
}
erstmals = false ;
}
function aufklappen(mev) {
if(mev) var wodenn = mev.target ; // Browser-abhängig
else var wodenn = window.event.srcElement ; // das Element ermitteln
alert("Hallo! wir sollten das Untermenu zu " + wodenn.id + " aufklappen") ;
}
Hier kannst du's ausprobieren.
Die Erklärungen zu diesen JavaScript-Teilen sind hier ziemlich knapp gehalten; schliesslich geht es hier eher um allgemeine JavaScript-Codierung als um unser primäres Interessegebiet, die Kombination dreier Web-Techniken. Da ich hier aber ein schlechtes Gewissen nicht ganz unterdrücken kann, biete ich dir weiter gehende Erklärungen auf einer separaten Seite an:
Ich wage aber zu behaupten, dass du unsere Aufgabe und ihre Lösung auch ohne das weiter verfolgen kannst.