Laufschriften auf Webseiten
Mittlerweile sind sich automatisch bewegende Texte aus Webseiten nicht mehr wegzudenken. Es bieten sich aber auch vielseitige Einsatzmöglichkeiten, wie z.B. die Verkündung von Neuigkeiten, aktuellen Nachrichten oder anderen Informationen. Für den Programmierer ist es keine große Sache, solche Lauftexte mit einfachen Mitteln in Javascript zu programmieren, so dass sie mit allen gängigen Browsern kompatibel sind.Das marquee-Element
Die einfachste Möglichkeit, einen Lauftext in eine Webseite einzubinden, ist das marquee-Element. Dieses ursprünglich von Microsoft entwickelte HTML-Tag, welches auch ursprünglich nur der Internet Explorer interpretiert hat, wird heute u.a. auch vom Firefox und Opera unterstützt. Deshalb ist dieses Element, obwohl es bis heute nicht zum offiziellen Standard gehört, der erste Ansatz. Das Element bindet man so in die Webseite ein:<marquee>Nachrichtenticker</marquee>
Ändern der Textrichtung
Damit läuft der Text über das ganze Browserfenster von rechts nach links. Um die Richtung zu verändern, gibt es das Attribut "direction", mit dem man angeben kann, wie sich der Text bewegen soll. Für das Attribut gibt es die folgenden Werte: left (Text von rechts nach links), right (Text von links nach rechts), up (Text von unten nach oben), down (Text von oben nach unten). Beispiel:<marquee direction="down">Nachrichtenticker</marquee>
Automatischer Richtungswechsel
Damit sich der Text nicht nur in eine Richtung bewegt, gibt es das Attribut "behavior", mit dem ein automatischer Richtungswechsel festgelegt werden kann. Wenn das Attribut nicht angegeben wird, bewegt sich der Text nur in eine Richtung. Beispiel:<marquee behavior="alternate">Nachrichtenticker</marquee>
Geschwindigkeit des Lauftextes
Mit zwei weiteren Attributen kann die Geschwindigkeit des Lauftextes beeinflusst werden. Für das Attribut "scrolldelay" gibt man einen Zeitraum in Millisekunden an, in dem der Lauftext seine Position in der vorgegebenen Richtung ändert. Das bedeutet, dass sich der Text umso langsamer bewegt, je höher der angegebene Wert ist. Mit dem Attribut "scrollamount" kann man festlegen, wie weit sich der Lauftext bei einer Positionsänderung bewegen soll. Je höher der hier angegebene Pixelwert ist, desto weiter bewegt sich der Lauftext. Beispiel:<marquee scrollamount="50" scrolldelay="100">
Nachrichtenticker </marquee>
Höhe des Bereiches für den Lauftext
Durch das Attribut "height" kann die Höhe des Bereiches festgelegt werden, in der sich der Lauftext bewegen soll. Dazu muss u.a. zwischen dem Firefox und dem Internet Explorer unterschieden werden. Beim Firefox bewegt sich der Lauftext bei "direction=up/down" normalerweise über ca. 1/3 der Höhe des Browserfensters. Wenn für "height" der Wert 100% angegeben wird, verringert sich der Bereich auf die Höhe einer Zeile, die der Lauftext bei der Bewegung hin horizontaler Richtung benötigen würde. Andere Angaben für die Höhe beziehen sich darauf. Beim Internet Explorer bezieht sich der Wert für "height" auf die Höhe des Browserfensters. Standardmäßig bewegt sich der Lauftext auch über die Höhe des Browserfensters, wenn "height" nicht angegeben ist. Andere Angaben beziehen sich auf die Höhe des Browserfensters. Bei der Festlegung der Höhe ist weiterhin das Attribut "bgcolor" von Bedeutung, mit der ein eigener Hintergrund für den Bereich des Lauftextes festgelegt werden kann. Zur Festlegung der Höhe ist ein prozentualer und Pixel-Wert möglich. Bei der Hintergrundfarbe gelten die üblichen HTML-Regeln zur Farbangabe. Beispiel:<marquee height="100%" direction="up"
bgcolor="blue">Nachrichtenticker</marquee>
Freie Lauftexte mit Javascript
Der folgende HTML-Code dient als Ausgangspunkt für den Lauftext:<html>
<head>
<script type="text/javascript">
</script>
</head>
<body>
<p>Aktuelle Nachrichten vom 20.02.08</p>
<input type="text" name="newsticker">
</body>
</html>
var text = " +++ Sport: Nachricht1 +++ Politik: Nachricht 2 +++ ";
Jetzt gibt man noch zwei Variablen an, die zur Bewegung des Lauftextes später notwendig sind. Dabei hat die Variable "begin" den Wert 0 und die Variable "end" bekommt die Länge des Ausdrucks (= Anzahl der Buchstaben), der bei der Variable "text" angegeben wurde, als Wert zugewiesen.var begin = 0;
var end = text.length;
Diese Javascript-Funktion sieht so aus:
function lauftext()
{
document.getElementsByName("newsticker")[0].value = "" +
text.substring(begin,end) + " " + text.substring(0,begin);
begin ++;
if(begin >= end)
{
begin = 0;
}
window.setTimeout("lauftext()", 3000);
}
<body onLoad="lauftext()">
Die folgenden Zeilen sollen zeigen, was die Funktion lauftext() bewirkt. Im Prinzip beruht die Funktion darauf, dass ein immer größer werdendes Teilstück des ursprünglichen Textes extrahiert und an ein anderes Teilstück des Textes, welches zu Beginn dem kompletten Text entspricht, hinzugefügt wird. Das Teilstück, welches am Anfang dem ganzen Text entspricht, wird durch die größer werdende Variable "begin" immer kleiner und so wird der Text immer weiter nach links verschoben. Wenn der Wert der Variablen "begin" größer oder gleich dem Wert von "end" ist, wird "begin" wieder auf 0 gesetzt und der Vorgang beginnt von vorne. Nach jedem Durchlauf wird die Funktion durch die Eigenschaft window.setTimeout immer wieder aufgerufen.Durchlauf 1:
begin = 0; end = 71;
text = "Sport: Nachricht1 +++ Politik: Nachricht 2 +++ Wetter: Nachricht 3 +++"
Durchlauf 2:
begin = 1; end = 71;
text = "port: Nachricht1 +++ Politik: Nachricht 2 +++ Wetter: Nachricht 3 +++ S"
Durchlauf 3:
begin = 2; end = 71;
text = "ort: Nachricht1 +++ Politik: Nachricht 2 +++ Wetter: Nachricht 3 +++ Sp"
Usw.
Beeinflussung der Geschwindigkeit
Der zweite Parameter, der bei der Eigenschaft setTimeout mitangegeben wurde, entspricht der Zeit, nach der die Funktion lauftext() erneut aufgerufen wird. Wenn man diesen Zeitraum erhöht, dauert es bis zum erneuten Aufruf der Funktion länger und der Lauftext läuft in der Folge langsamer. Es sollte dabei beachtet werden, dass der angegebene Zeitraum in Millisekunden angegeben werden muss.Zeitliche Begrenzung des Lauftextes
Ein Gedanke ist, dass ein Lauftext den Besucher einer Webseite mit der Zeit nervt. Der Lauftext macht die Webseite in ihrer Wirkung unruhig und wenn sich die Informationen nicht verändern - irgendwann hat es jeder kapiert, was im Text drinsteht. Javascript bietet die Methode clearTimeout, mit der der Zeitraum, in der window.setTimeout ausgeführt wird, begrenzt werden kann. Dazu muss der bisherige Quelltext wie folgt erweitert bzw. verändert werden.function lauftext_main()
{
lauftext();
window.setTimeout("stop_lauftext()",3000);
}
function stop_lauftext()
{
window.clearTimeout(aktiv);
alert("Lauftext beendet");
}
<body onload="lauftext_main()">
Änderung der Laufrichtung des Textes
Bisher läuft der Lauftext von rechts nach links. Diese Richtung kann jederzeit nach Bedarf geändert werden. Dazu muss der Code der Funktion entsprechend angepasst werden. Weiterhin hat die ursprüngliche Variable "begin" keine Aufgabe mehr. Die Funktion sieht jetzt so aus:var cnt = 0;
function lauftext()
{
document.getElementsByName("newsticker")[0].value = "" +
text.substring((end-cnt),end) + " " +
text.substring(begin,(end-cnt));
cnt++;
if(cnt >= end)
{
cnt = 0;
}
window.setTimeout("lauftext()", 100);
}
Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.
Weiterlesen: ⯈ Bilder
Über uns
Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project