CSS Anwendung

Pop Up, Pop down

Fang die Maus!

Wir beginnen für einmal in der Mitte: beim Verschieben.

Verschieben heisst in unserem Fall, dass wir die Position des Popups der aktuellen Mausposition anpassen.

Dazu brauchen wir die aktuelle Mausposition, und die erhält man mit folgenden Javascript-Anweisungen:

// Die Funktion mousePos ermittelt dauernd die Position der Maus
function mousePos(evnt){
  if(evnt) {
    sy = evnt.clientY + window.document.body.scrollTop ;
    sx = evnt.clientX + window.document.body.scrollLeft ;
  }
  else {
    sy = event.y + window.document.body.scrollTop ;
    sx = event.x + window.document.body.scrollLeft ;
  }
}
document.onmousemove = mousePos;

Diese paar Zeilen haben's in sich. Sie kommen auch in andern Beispielen immer wieder vor und ich tu mich regelmässig schwer, sie zu erklären und empfehle dann jeweils, sie einfach zu übernehmen. Aber ich mache hier dennoch einen Erklärungsversuch.

Wenn du die Klammern (insbesondere die geschweiften) studierst, stellst du fest, dass der Löwenanteil dieses Programmstücks, nämlich 8 Zeilen, in so einer Klammer-Konstruktion stehen. Diese Zeilen bilden eine so genannte Funktion, ein Stück Programm, das herumsteht und Däumchen dreht, bis es bei seinem Namen gerufen wird. Der Name dieser Funktion lautet übrigens mousePos.
Die Funktion ermittelt zwei Werte: die x- und die y-Koordinate der Maus. Sie stellt diese Werte in den Variablensxund sy zur Verfügung.
Die Funktion mousePos kennt offenbar zwei Methoden, wie sie diese Werte ermitteln kann. Das ist nötig, weil sie die Werte vom Browser erfragen muss, und unterschiedliche Browser (der Internet Explorer, Firefox, Opera, Safari und wie sie sonst noch alle heissen) verlangen unterschiedliche Behandlungen. Dem wird hier Rechnung getragen, und das ist zugleich der Teil, den ich nicht ausführlicher kommentieren möchte.
Die letzte Zeile setzt nun das Ganze in Betrieb: Sie verlangt, dass jedesmal, wenn die Maus bewegt wird (onmousemove) unsere Funktion mousePos ausgeführt und die neuen, aktuellen Koordinaten bereitgestellt werden sollen.

Das ist schon mal ein guter Grundstock, auch wenn man davon nicht allzuviel sieht. Wenn du das ganze Programm hier mit mir zusammen entwickelst, dann wär's jetzt an der Zeit, diese paar Zeilen in eine txt-Datei zu stellen, als movebox.js zu speichern und mit der Angabe

   <script type="text/javascript" src="movebox.js"></script>

in den <head>-Bereich einer Übungsseite einzubauen.

Auf der nächsten Seite wollen wir schon mal sicherstellen, dass das so weit auch klappt.

ï»¿

Homepapa
August 2004

Vorheriger Abschnitt:
viel Arbeit!

NÃ¤chster Abschnitt:
ja wo ist sie denn?

Inhalt

Service

CSS Anwendung

Pop Up, Pop down

Fang die Maus!