Kontakt aufnehmen

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>

Als nächstes muss der Text für die Laufschrift festgelegt werden. Man kann dies auf HTML-Ebene (= value-Attribut für input-Element) oder auf Javascript-Ebene (Inhalt einer Variablen) erledigen. Da man die Informationen aber auf jeden Fall in Javascript benötigt, bietet es sich an, die Javascript-Variante zu verwenden. Deshalb fügt man in den script-Bereich folgende Zeile ein:

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;

Alle weiteren Javascript-Kommandos müssen in einer Funktion zusammengefasst werden, die zur Aktivierung der Laufschrift aufgerufen wird.
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);
}

Zum Schluss muss noch der Funktionsaufruf integriert werden. Da der Lauftext ja sofort zur Verfügung stehen soll, bietet es sich an, die Funktion schon beim Aufruf der eigentlichen Webseite zu starten. Deshalb ist der Einsatz des Eventhandlers "onLoad" sinnvoll. Mit der folgenden Erweiterung der body-Zeile wird der Funktionsaufruf in den Quellcode eingebunden:

<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);
}

Diese Funktion muss eingefügt werden, die beim Laden der Webseite aufgerufen wird. Mit dieser Funktion wird zum einen der Lauftext gestartet und gleichzeitig nach einem bestimmten Zeitraum eine weitere Funktion aufgerufen, mit der der Lauftext gestoppt wird. Diese neue Funktion sieht so aus:

function stop_lauftext()
{
 window.clearTimeout(aktiv);
 alert("Lauftext beendet");
}

In der Folge muss der Funktionsaufruf im body-Tag wie folgt verändert werden:

<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);
}

Innerhalb der Zeichenkettenverknüpfung, die dem einzeiligen Eingabefeld zugewiesen wird, wird zweimal ein Teil des ursprünglichen Textes extrahiert. Zum einen wird - ausgehend von der kompletten Länge des Textes - der Beginn der Extrahierung immer weiter nach links verlegt und zum anderen wird die Anzahl der Zeichen, die extrahiert werden sollen, bei jedem Durchlauf der Funktion verringert. Dies wird durch die Variable "cnt" realisiert, die bei jedem Funktionsaufruf um 1 erhöht wird.

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Weiterlesen: ⯈ Bilder

Über uns

Stefan Wienströer

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project

Cookie-Einstellungen

Helfen Sie dabei, uns noch besser zu machen. Wir nutzen Cookies und ähnliche Technologien, um die Website auf Ihre Bedürfnisse anzupassen. Zur Datenschutzerklärung

Auswahl speichern