Inhalt

Einleitung Voraussetzungen Pop Up, Pop down Flatter, flatter Vorhang auf! Aufgabenstellung Vorbereitung Seite Bilder Anordnung Marilyn divs verschachteln positionieren relativ Vorhang zu Action! Hallo ... später Hallo ein Spalt Variable auf geht's! abschneiden schööön! weiteres heiteres Klappe zu!

---

Service

Kontakt & Feedback

CSS Anwendung

Vorhang auf!

schööön!

Wir haben nun die wesentlichsten Schritte gemeistert: Bilder übereinander positioniert (CSS) und bewegt (JavaScript). Das, was es allenfalls zu lernen gegeben hat, haben wir dabei gelernt und erklärt.

Etwas Kosmetik zum Schluss wird uns daher inhaltlich nicht mehr viel Neues bringen, ist aber durchaus angebracht, wenn uns das Resultat auch befriedigen soll.

Rahmen

Marilyn und die Willkommenstafel sind (vermutlich) von einem blauen Rahmen umgeben. Die meisten Browser machen das aus eigenem Antrieb, weil sie es für nötig halten, Hyperlinks so zu kennzeichnen. In unserem Fall sind die Rahmen aus Kontrastgründen schlecht sichtbar, verschieben aber Bild und Vorhang leicht gegeneinander, was irgendwie schludrig wirkt.

Die Korrektur ist einfach: bei den style-Angaben platzieren wir noch die Zeile

#alles img { border: none }

Sie bewirkt dass Bilder, die sich in der <div id="alles"> befinden, ohne Ränder dargestellt werden.

Ausblenden

Wenn sich der Vorhang geöffnet hat, bleibt zur Zeit noch ein Streifen davon rechts vom Bild sichtbar. Mit einigem Nachdenken lässt sich der erklären: Wenn der Vorhang auf ist, hat unsere Variable dist einen Wert von 250. Damit berechnet unsere Funktion eine neue breite von -1. Das ist natürlich kein sinnvoller Wert. Wenn nun ein JavaScript Fehler produziert, reagieren die verschiedenen Browser nicht immer einheitlich, und der beste Weg ist daher sicher, Fehler zu vermeiden. Wir fügen daher eine Korrekturzeile ein, die für breite entweder 0 oder den errechneten Wert annimmt, je nachdem, welcher von beiden höher ist. Dadurch landen wir am Ende exakt bei Breite 0, egal wie ungerade die ursprüngliche Breite war.

 
function hallo(dist) {
  dist += 10 ;
  document.getElementById("vorhang").style.left = dist + "px" ;
  breite = 349 - dist ;
  breite = Math.max(0,breite) ; 
  document.getElementById("vorhang").style.width = breite + "px" ;
  if(dist < 350) {
    window.setTimeout("hallo(" + dist + ")",100) ;
  }
}

Von der CSS-Seite her gesehen nicht viel Neues; die display-Eigenschaft wurde in den CSS-Kursen gewürdigt, ist aber vermutlich nicht besonders auffällig in Erscheinung getreten. Wie du siehst, kann man sie aber offenbar mit JavaScript kontrollieren.

Das war's

Damit haben wir eine Einstiegsseite mit Bewegung realisiert.

Sie verwendet lauter Standard-Funktionen (CSS und JavaScript), die von jedem ernstzunehmenden Browser unterstützt werden, ist wesentlich schlanker als ein animiertes GIF-Bild und auf Plug-Ins wie z.B. Flash nicht angewiesen. Und da der Hyperlink zum Betreten der Seite ein ganz normales <a>-Element ist, funktioniert die Seite auch bei Besuchern, die JavaScript ausgeschaltet haben, und die Roboter der Suchmaschinen können ihm ebenfalls folgen.

Und hier ist die fertige Seite.