Inhalt

Einleitung Voraussetzungen Pop Up, Pop down Flatter, flatter Vorhang auf! Klappe zu! Übersicht die HTML-Seite die Hyperlinks das Stylesheet Block-Elemente Gestaltung einrücken Script, Script, Hurrah einrichten zielen Schutt verschwindibus globale Werte Ereignisse wo bin ich? endlich ausklappen Moment noch! das ist die Höhe polieren Abschluss

---

Service

Kontakt & Feedback

CSS Anwendung

Klappe zu!

Script, Script, Hurrah

Ereignisse

Im Vorhang-Beispiel mit Marilyn hatten wir die Zeile

 <div id="willkommen" onmouseover="hallo()">

besprochen. Wir schafften es damit, eine div anzulegen, die jedesmal die Funktion hallo() auslöste, wenn man sie mit der Maus berührte. Etwas Ähnliches sollte jetzt mit unsern Menüs passieren: Immer wenn man eins mit der Maus "betritt", sollte die Funktion ausklappen() aufgerufen werden (und dann hoffentlich das Richtige ausklappen). Wir möchten aber nicht im HTML-Code unserer Seite bei jedem Hyperlink so ein onmouseover-Attribut notieren, denn das macht nur den Code schwerfällig und unübersichtlich.

Tatsächlich ist es möglich, die Seite anzuzeigen und den Sonderwunsch, dass beim Eintreten eines ganz bestimmten Ereignisses (man nennt das "Event") eine Funktion aufzurufen ist, erst im Nachhinein zu installieren. Du siehst hier, wie's gemacht wird:

var das_menu ;
var die_class ;
var erstmals = true ;

function zuklappen() {

  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) {
        if(erstmals) {
          dieseskind.onmouseover = aufklappen ;
          dieseskind.onmouseout  = zuklappen ;
        }
        if(dieseskind.className.substr(die_class.length,1) > "1") {
          dieseskind.style.display = "none" ;
        }
      }
    }
  }
  erstmals = false ;
}

In der Mitte der Funktion zuklappen siehst du die enstprechenden Anweisungen:

          dieseskind.onmouseover = aufklappen ;
          dieseskind.onmouseout  = zuklappen ;

Sie bedeuten: "Für dieses Element gilt: bei Betreten mit der Maus die Funktion aufklappen und beim Verlassen die Funktion zuklappen ausführen."

Das muss einmal so eingerichtet werden, und wir tun das beim ersten Mal, unmittelbar nach dem Laden der Seite. Wir legen ganz zu Beginn eine Variable erstmals an, die den Wert true (also "wahr") hat und am Ende der Funktion auf false (also: falsch) gesetzt wird. Mit der if-Abfrage stellen wir sicher, dass die Installation der Event-Behandlung nur das erste Mal erfolgt.

Machen wir nun noch eine weitere Funktion:

function aufklappen() {
  alert("Hallo! wir sollten was aufklappen") ;
}

dann können wir schon mal sehen, ob so ein Event erkannt und durchgeführt wird.

Hier kannst du's überprüfen.