Homepapa-Logo

Inhalt

Einleitung Voraussetzungen Pop Up, Pop down Flatter, flatter Übersicht Start bei Null schreiben schreiben lassen bewegen wie? wo? wann? im Fluss Kosmetik Vorhang auf! Klappe zu!

Service

Kontakt & Feedback

CSS Anwendung

wo?

Natürlich könnte man jetzt sagen: das neue Skript kommt auch in den head-Bereich. Da hätte man denn auch recht. Das Problem ist eher, dass es dort, zusammen mit dem Skript, das wir schon haben, schon beim Laden der Seite ausgeführt würde. Wir müssen unser neues Skript so lange "auf Abruf" bereit halten, bis es wirklich gebraucht wird.

Hier siehst du, wie wir unseren Skript-Abschnitt erweitern. Grau ist, was schon jetzt dort ist, gelb ist, was jetzt neu dazu kommt:

<script type="text/javascript">
var text = "Homepapa for President!" ;
var abstand = 20 ;
var sx = 200 ;
var sy = 200 ;
for(i=0 ; i<text.length ; i++) {
  meinx = sx + i*abstand ;
  meiny = sy ;
  document.writeln('<div id="f_' + i + '"'
                 + ' class="flatter"'
                 + ' style="top: ' + meiny + 'px ; left: ' + meinx + 'px ">'
                 + text.substr(i,1) + '</div>') ;
}

function bewegen(neux,neuy) {
  for(i=0 ; i<text.length ; i++) {
    meinx = neux + i*abstand ;
    meiny = neuy ;
    meini = "f_" + i ;
    document.getElementById(meini).style.left = meinx + "px" ;
    document.getElementById(meini).style.top  = meiny + "px" ;
  }
}

</script>

Da hab ich nun noch etwas hinzugefügt:

function bewegen(neux,neuy) {
  ... unser neues Skript ...
}

Diese "Verpackung", in der unser neues Skript nun steckt, hat zwei Auswirkungen:

  1. bewirkt sie, dass das Skript nicht ausgeführt wird, bis man es bei seinem Namen ruft. Der Name lautet bewegen.
  2. wird hier auch gleich versprochen, dass die neuen Koordinaten (neux,neuy) dann beim Aufruf gleich mit geliefert werden.

Ein gutes und flexibles Konzept. Ergänze also den Script-Teil deiner HTML-Seite wie hier vorgegeben, und dann wollen wir mal sehen, wie man so eine Bewegung auslösen kann.


Homepapa
August 2004
Vorheriger Abschnitt:
wie?
Nächster Abschnitt:
wann?