divs
verschachteln
positionieren
relativ
Vorhang zu
Action!
Hallo ...
später Hallo
ein Spalt
Variable
auf geht's!
abschneiden
schööön!
weiteres heiteres
Klappe zu!
Wir wissen nun, wie man den Vorhang bewegt. Aber wir möchten ihn nicht nur um 10 Pixel
bewegen, sondern um 10, 20, 30 Pixel, immer mehr, bis er ganz offen ist. Dazu müssen wir
die Funktion mehrmals aufrufen (wie macht man das?) und dabei jedesmal eine neue Distanz
angeben. Wir machen das in zwei Schritten, damit nicht allzu viel verschiedenes aufs Mal
kommt. Nehmen wir also den Wert für left als ersten Schritt.
Unsere Funktion hallo() hat bis jetzt nur eine Zeile. Das soll sich
ändern; wir verdoppeln das auf stattliche zwei Zeilen:
function hallo(dist) {
dist += 10 ;
document.getElementById("vorhang").style.left = dist + "px" ;
}
Das bedeutet, dass wir der Funktion nun jeweils einen Wert liefern müssen. Beim ersten Aufruf
werden wir den Wert 0 (Null) mitliefern. Der steht dann der Funktion in der Variablen dist
zur Verfügung. Gleich als erstes wird dieser Wert um 10 erhöht. (Die Schreibweise
dist += 10 ; ist vielleicht etwas gewöhnungsbedürftig, aber in vielen
Programmiersprachen verbreitet). Nun enthält die Variable dist also den Wert 10.
In der zweiten Zeile fällt der Ausdruck dist + "px" ; auf. Das sieht
aus, als würden hier Äpfel und Birnen zusammengezählt: Die Zahl 10 und die Buchstabenfolge px.
Sowas ist in JavaScript möglich und bewirkt, dass die beiden Dinge aneinandergereiht werden.
Das Resultat ist also 10px und das wird dann dem left-Wert des Vorhangs zugewiesen.
Natürlich dürfen wir nicht vergessen, der Funktion nun tatsächlich den Wert 0 mitzugeben:
<div id="willkommen" onmouseover="hallo(0)">
Von aussen gesehen hat sich nichts verändert und die Seite funktioniert noch immer wie vorher, was du gerne ausprobieren kannst.
Aber wir sind nun bereit für die letzte Erweiterung.