 |
Laufschrift mit DHTML
Mit dem neuen Feature des absoluten Positeonierens hält eine
weitere Möglichkeit der Animation auf HTML-Seiten einzug. Und zwar
durch 'Javascript': Die Programmiersprache hat nämlich Zugriff auf
die verschiedenen Werte eines Stils und kann diese auslesen oder verändern.
Wird aber die Positeon eines Stils verändert, ändert sich auch die
Positeon seines Inhalts.Wie das funktioniert sehen Sie im folgenden
Beispiel, in dem wir eine einfache Laufschrift programmieren. Sie
zeigt das grundlegende Prinzip wie Dynamik auf eine HTML-Seite
kommt.Zuerst benötigen wir einen eigenen Stil für die Laufschrift:
<style>
#laufschrift
{
positeon: absolute;
top: 0;
left: 0;
}
h2
{
background-color: red;
color: yellow;
}
</style>
Um das Ganze ein wenig aufzupeppen, haben wir die Überschrift
<h2>, in der wir den Laufschrift ausgeben werden, umdefiniert
- sie hat nun eine rote Hintergrundfarbe und die Zeichenfarbe
'Gelb'.Jetzt kommt das kleine Skript, das diesen Stil über den
Bildschirm verschiebt. Eingeleitet wird es vom
"<script>"-Tag in dem auch die Sprache steht und
beendet mit "</script">:
<script
language="JavaScript">
var x=0;
var delay=2;
var jump=4;
function doanim()
{
if(document.layers) document.laufschrift.left=x; else
document.all.laufschrift.style.left=x;
x-=jump;
if(x<-434) x=0;
setTimeout("doanim()", delay);
}
</script>
Zu Beginn definieren wir einige, später benötigte
Variablen:"x" enthält die Positeon des Stils,
"delay" gibt die Verzögerung vor einem erneuten
Verschieben an und "jump" die Anzahl Pixel, die
"x" nach links weiterbewegt wird. Die Funktion
"doanim()" führt die eigentliche Animation aus: Mit
"document.laufschrift" sprechen wir den oben definierten
Stil an, und mit "left" die entsprechende Eigenschaft,
also die X-Positeon. Die setzen wir auf den Wert der Variablen
"x". Hierbei müssen wir testen, welcher Browser verwendet
wird und entsprechend andere Befehle verwenden. Dann ziehen wir von
"x" den Betrag ab, um den der Stil und dessen Inhalt
weiterspringen soll. Dabei wird "x" in unserem Beispiel
negativ, also auch die Positeon des Stils - auch dies ist möglich,
entsprechend "verschwindet" der Inhalt des Stils links aus
dem Fenster. Die nächste Zeile vergleicht um wieviele Pixel der
Stil schon hinausgeschoben wurde und setzt "x"
gegebenenfalls zurück.mit "setTimeout()" geben wir an,
wann unsere funktion wieder gestartet werden soll, damit den Stil
den nächsten Schritt zu bewegen.
All dies muss im "<head>..</head>"-Block der
HTML-Seite gespeichert werden. Der
"<body>..</body>"-Teil sieht dann so aus:
<body onload="doanim()">
<div id=laufschrift>
<table><tr><td nowrap>
<h2>
Eine einfache Laufschrift mit DHTML...
Eine einfache Laufschrift mit DHTML...
Eine einfache Laufschrift mit DHTML...
Eine einfache Laufschrift mit DHTML...
</h2>
</table>
</div>
</body>
Mit der Angabe "onload=" weisen wir den Browser an, gleich
nach dem Laden der Seite unsere Animationsfunktion zu starten.Jetzt
folgt der Laufschrift-Text - umgeben von
"<h2>..</h2>"-Tags, um ihn grösser und schöner
zu machen, von einer Tabelle, damit er nicht am Seitenende umbricht
(die Angabe "<td nowrap>" verhindert dies) und ganz
aussen die Kennzeichnung durch unseren Stil.
|
|
|
DIENSTE
