divs
verschachteln
positionieren
relativ
Vorhang zu
Action!
Hallo ...
später Hallo
ein Spalt
Variable
auf geht's!
abschneiden
schööön!
weiteres heiteres
Klappe zu!
Der folgende Zusatz in den style-Angaben
#alles { position: relative ; height: 527px ; width: 349px ; margin: 0 auto }
positioniert Marilyn ins Zentrum der Seite.
Der folgende Zusatz in den style-Angaben
#vorhang { position: absolute ; top: 0em ; left: 0em ;
height: 527px ; width: 349px ;
border-left: 8px solid #eeeeee ;
background: url(wtuell.gif) }
versieht den Vorhang mit einem Saum am linken Rand. (Allerdings musst du dafür die Breite
der Div von 349 auf 341 reduzieren - auch im JavaScript!)
Wenn du die <div id="willkommen"> in die <div id="vorhang">
hineinstellst, wandert die Willkommenstafel zusammen mit dem Vorhang zur Seite.
Am Ende unserer Funktion, wenn der Wert für dist 350 erreicht hat,
könnten wir noch zwei Aktionen einfügen:
function hallo(dist) {
dist += 10 ;
document.getElementById("vorhang").style.left = dist + "px" ;
breite = 341 - dist ;
breite = Math.max(breite,0) ;
document.getElementById("vorhang").style.width = breite + "px" ;
if(dist < 350) {
window.setTimeout("hallo(" + dist + ")",100) ;
}
else {
document.getElementById("willkommen").style.display = "none" ;
window.setTimeout("location.href = 'http://homepapa.ch'",5000) ;
}
}
Damit wird die Willkommenstafel ausgeblendet, die sich nun rechts vom Bild befindet.
Der Grund dafür liegt darin, dass andernfalls die ganze Vorhang-auf Geschichte wieder
von vorne losgehen würde, wenn man mit der Maus drauf ginge - man könnte die Tafel
gar nicht richtig anklicken.
Ausserdem wird nach 5 Sekunden (window.setTimeout mit 5000 Millisekunden)
die Adresse der angezeigten Seite (location.href) gewechselt - wir werden
also automatisch weitergeleitet.
Mit diesen Modifikationen wollen wir's nun aber definitiv bewenden lassen und das Kapitel als abgeschlossen betrachten.