divs
verschachteln
positionieren
relativ
Vorhang zu
Action!
Hallo ...
später Hallo
ein Spalt
Variable
auf geht's!
abschneiden
schööön!
weiteres heiteres
Klappe zu!
Da gibt's nun noch eine Kleinigkeit zu korrigieren. Jetzt wird nämlich der Vorhang einfach beiseite geschoben und steht dann rechts neben dem Bild. Wenn du damit zufrieden bist, soll's mir recht sein und du kannst dann diesen Schritt überspringen. Ich selber möchte aber, dass der Vorhang rechts vom Bild nicht mehr sichtbar ist.
Das ist recht einfach zu erreichen. Wenn wir Style-Angaben wie z.B. left verändern
können, dann sicher auch width. Und die jeweilige Breite des Vorhangs ist nicht schwer
zu berechnen: sie ergibt sich aus der Gesamtbreite des Bildes abzüglich der linken Anfangsposition.
Erweitern wir also unser Skript um zwei Zeilen:
hallo(dist) {
dist += 10 ;
document.getElementById("vorhang").style.left = dist + "px" ;
breite = 349 - dist ;
document.getElementById("vorhang").style.width = breite + "px" ;
if(dist < 350) {
window.setTimeout("hallo(" + dist + ")",100) ;
}
}
Jetzt, da ich dies schreibe (September 2004), hat der Internet Explorer von Microsoft an dieser Stelle eine kleine Schwäche: Er verliert die Höhenangabe der Vorhang-Div. Währenddem die Mozilla-Browser (Firefox, Netscape, K-Meleon etc.) und Opera das gewünschte Resultat bringen, reduziert der am weitesten verbreitete Browser unsern Vorhang auf ein armseliges Stoffstreifchen.
Mit solchen Überraschungen müssen wir leben lernen. Korrekturen gibt es sicher: Ersetzen wir z.B. in den Style-Angaben die praktische Zeile
height: 100% ; width: 100% ;durch
height: 527px ; width: 349px ;dann sind alle zur Zeit verfügbaren Browser zufrieden.
Sieht doch schon viel besser aus!
Dann fehlen nur noch ein paar Kleinigkeiten kosmetischer Natur.