Wann wird nun endlich etwas bewegt?
Auf eine einfache Weise können wir das sofort machen, und wir finden dann endlich heraus, ob all unsere Skripts überhaupt funktionieren. Dazu fügen wir nach dem Titel unserer HTML-Seite folgende Zeile ein:
<p><a href="javascript:bewegen(250,250)">Schrift bewegen</a></p>
Hier handelt es sich also um einen Link, der allerdings nicht auf eine andere Seite verweist, sondern auf unser Skript. Du siehst hier, dass es tatsächlich bei seinem Namen gerufen wird und bei dieser Gelegenheit auch gleich noch die beiden Koordinaten mit erhält. (Natürlich kannst du statt 250 auch andere sinnvolle Werte ausprobieren).
Das müsste jetzt schon mal funktionieren - ein Muster hab ich hier.
Es klappt auch, allerdings viel zu schnell und zackig. Die weiche, fliessende Bewegung ist noch nicht da, und wir werden auch noch ein wenig auf sie warten müssen. Zuerst erledigen wir hier noch die Sache mit dem Auslösen der Bewegung.
Wir haben in unserem letzten Beispiel die Bewegung durch einen Klick auf einen Link ausgelöst. Das ist aber nicht, was uns vorschwebte. Es gibt da natürlich auch andere Möglichkeiten, und eine davon ist die, dass wir so einen Abruf "bestellen" können. Das sieht so aus:
window.setTimeout(was,wann)
Die setTimeout()-Methode erwartet einen Befehl und eine Zeitspanne. Sie wird dann
nach Verstreichen der Zeitspanne den Befehl ausführen. Bei uns könnte der jetzt so aussehen:
window.setTimeout("bewegen(sx,sy)",30)
In Worten: Führe das Bewegungs-Skript aus, und zwar von jetzt an in 30 Tausendstelssekunden. Als Koordinaten gibst du ihm die Werte mit, die sich in den Variablen sx und sy befinden.
Diesen Befehl stellen wir an zwei Stellen in unsere HTML-Seite:
...
...
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" ;
}
window.setTimeout("bewegen(sx,sy)",30) ;
}
</script>
</head>
<body onload='window.setTimeout("bewegen(sx,sy)",30)'>
<h1>Textfahne</h1>
Wie du siehst, geben wir am Ende des Bewegungs-Skripts gleich wieder eine Bestellung auf, so dass das Skript von nun an alle 30 Tausendstelssekunden aufgerufen wird.
Das einzige, was jetzt noch fehlt, sind die Koordinaten der Maus.
Dies ist ein etwas trübes Kapitel, und ich schlage vor, dass du die paar Zeilen, die es dafür
braucht, einfach mal in deine HTML-Seite kopierst, am besten unmittelbar vor den </script>-Tag.
Hier sind sie, die Zeilen:
// Die Funktion mousePos ermittelt dauernd die Position der Maus
function mousePos(evnt){
if(evnt) {
sy = evnt.clientY + window.document.body.scrollTop ;
sx = evnt.clientX + window.document.body.scrollLeft ;
}
else {
sy = event.y + window.document.body.scrollTop ;
sx = event.x + window.document.body.scrollLeft ;
}
}
document.onmousemove = mousePos;
Ich möchte das hier nicht im Detail erklären. Es wird später bei den Klappmenus etwas Ähnliches auftauchen, das dann etwas eingehender erläutert wird. In der Praxis aber kannst du davon ausgehen, dass du diese paar Zeilen genau so in irgend einen Skript-Abschnitt rein stellen kannst, und dann sind die Koordinaten der Maus einfach immer in den beiden Variablen sx und sy greifbar.
Damit sind wir schon einen riesigen Schritt weiter, wie du hier sehen kannst.