CSS Anwendung

schreiben lassen

Wenn wir uns das so ansehen:

<div id="f_1" class="flatter"
     style="top: 200px; left:200px">A</div>
<div id="f_2" class="flatter"
     style="top: 200px; left:220px">h</div>
<div id="f_3" class="flatter"
     style="top: 200px; left:240px">a</div>
<div id="f_4" class="flatter"
     style="top: 200px; left:260px">!</div>

dann müssen wir schon zugeben, dass das etwas aufwändig zu werden droht, so bald der Text länger wird als es unser einfaches "Aha!" ist. Und es ist nicht etwa eine interessante Arbeit, das alles einzutippen.

Zeit also, zu einem kleinen Skript zu greifen.

Am Besten stellen wir es - genau wie die Style-Angaben - in den <head>-Bereich, und es könnte etwa so aussehen:

<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>') ;
}
</script>

Dazu gibt's wieder ein paar Erläuterungen:

Wie du siehst, kann ein JavaScript-Programm im <head>-Bereich einer HTML-Seite untergebracht werden. Eigentlich könnte es auch sonstwo stehen, aber aus verschiedenen Gründen, die wir hier nicht erläutern wollen, hat sich dieser Platz als der beste erwiesen.
Script-Code ist sehr gut in HTML integriert und hat sein eigenes HTML-Element, das mit<script>und </script> bezeichnet ist.
Die ersten vier Zeilen des Skripts sind recht einfach: Ich lege darin den Text fest, den Abstand zwischen den Buchstaben (er beträgt hier 20 Pixel, du kannst mit dieser Zahl natürlich experimentieren) und einen völlig willkürlichen Anfangspunkt (x- und y-Koordinate), wo ich den Text anzeigen will.
Der ganze Rest ist eine so genannte Schleife. Die Zeile
```
for(i=0 ; i<text.length ; i++) {
```
sagt aus, dass alle nachfolgenden Anweisungen, die zwischen den geschweiften Klammern stehen, mehrmals auszuführen sind. Zunächst wird die Variable i auf den Wert 0 gesetzt (i=0) und dann nach jedem Durchlauf um eins erhöht (i++). Das Abbruch-Kriterium steht in der Mitte:i<text.lengthbedeutet, dass die Schleife nochmals wiederholt werden muss, wenn der Wert der Variablen i kleiner ist als die Textlänge. (Der Text "Homepapa for President!" hat die Länge 23). Die drei Anweisungen in der Schleife werden also 23 mal ausgeführt, einmal für jeden Buchstaben.
Die ersten beiden Anweisungen sind wieder sehr einfach: Sie berechnen die Position des jeweiligen Buchstabens.
Die letzte Anweisung ist ziemlich umfangreich, aber um sie zu verstehen, braucht man nur zwei Dinge zu wissen: Erstens, dass "document.writeln" eine HTML-Zeile ins Dokument schreibt, und zweitens, dass der Text, der da geschrieben wird, mit Hilfe des +-Zeichens zusammengesetzt wird. Nämlich:
<div id="f_ und dazu der Inhalt der Variablen i (z.B. 5) ergibt dann
<div id="f_5 und dazu ein Gänsefüsschen ergibt dann
<div id="f_5" und dazu der Text class="flatter" ergibt dann
<div id="f_5" class="flatter" und so weiter.
Einer der Teile, die da zusammengefügt werden, sieht etwas komplizierter aus:
text.substr(i,1) bedeutet, dass man im text (der bei uns "Homepapa for President!" lautet) um i Positionen nach rechts geht (im Falle von i=5 landet man so beim ersten "a") und dort einen Buchstaben abholt. Beim nächsten Durchgang wird's dann das zweite "p" sein und so weiter.

Damit sind wir erstmal ein rechtes Stück Arbeit los geworden. Egal wie lange der Text nun ist, für uns bleibt die Arbeit die selbe; lediglich das JavaScript wiederholt seine Schleife etwas öfter.

Ungefähr so sollte es mittlerweile aussehen.

ï»¿

Homepapa
August 2004

Vorheriger Abschnitt:
schreiben

NÃ¤chster Abschnitt:
bewegen

Inhalt

Service

CSS Anwendung

schreiben lassen