Alle Kategorien
Suche

Ohne JavaScript eine Laufschrift erzeugen - mit HTML funktioniert's so

Eine Laufschrift mit dem HTML-Tag "marquee" erzeugen
Eine Laufschrift mit dem HTML-Tag "marquee" erzeugen
Falls Sie auf Ihrer Webseite einen simplen Newsticker erstellen oder auf eine wichtige Nachricht hinweisen möchten, können Sie dafür den Text als Laufschrift darstellen lassen. Dafür benötigen Sie nicht zwangsläufig eine JavaScript-Funktion, sondern können stattdessen auch einen simplen HTML-Tag verwenden, der gegenüber JavaScript auch einen entscheidenden Vorteil hat.

Nachteil einer Laufschrift mit JavaScript

Zwar können Sie relativ einfach einen sich fortbewegenden Text mit JavaScript erstellen, allerdings hat dies einen entscheidenden Nachteil.

  • So könnte JavaScript beim jeweiligen Browser des Besuchers deaktiviert sein, sodass Ihre Funktion überhaupt nicht angezeigt werden würde.
  • Dies können Sie vermeiden, indem Sie stattdessen einfach den entsprechenden HTML-Tag "marquee" (dt. "Laufschrift") verwenden, der von den gängigsten Browsern unterstützt wird, obwohl er offiziell nicht standardisiert ist.
  • Unabhängig davon, ob Sie nun JavaScript oder den Marquee-Tag verwenden, sollten Sie sich bewusst sein, dass ein laufender Text von Ihren Besuchern als störend empfunden werden kann. Laufschriften gehören heute außer bei Newstickern nur noch sehr selten zu modernen Webseiten, sodass Sie besser mit klaren Strukturen und Farbabstimmungen auf einen bestimmten Aspekt hinweisen sollten.

Marquee im HTML-Code nutzen

Der HTML-Tag "marquee" ist wie die meisten Tags simpel aufgebaut, sodass Sie grundsätzlich nur den Tag schreiben müssen, um eine Laufschrift zu erzeugen.

  • Dafür würde ausreichen, dass Sie <marquee>Ihre Nachricht</marquee> an die gewünschte Stelle schreiben. Dadurch würde der Text "Ihre Nachricht" vom rechten Bildrand stetig nach links wandern.
  • Falls Sie diese Richtung ändern möchten, brauchen Sie lediglich das Attribut "direction" (dt. Richtung) einfügen und dann die englische Laufrichtung angeben. Wenn Sie also möchten, dass sich der Text von links nach rechts bewegt, müssten Sie <marquee direction="right">Ihre Nachricht</marquee> schreiben, da die Laufrichtung ja nach "rechts" sein soll.
  • Damit sich die Laufschrift immer hin und her bewegt, also automatisch in die andere Richtung wechseln, sobald der Bildrand erreicht ist, können Sie das Attribut "behavior" mit dem Wert "alternate" verwenden. Dies könnte zum Beispiel wie folgt aussehen: <marquee behavior="alternate">Ihre Nachricht</marquee>.
  • Außerdem haben Sie die Möglichkeit, die Laufgeschwindigkeit des Textes mithilfe der zwei Attributen "scrollamount" und "scrolldelay" zu beeinflussen. Das Attribut "scrollamount" legt fest, inwiefern sich der jeweilige Text bei jedem Schritt bewegen soll, also wie viele Pixel er noch vorne springen soll. Das Attribut "scrolldelay" bestimmt dabei die Zeit zwischen den einzelnen Sprüngen fest, also die jeweilige Verzögerung ("delay"). Ein schnell fortschreitender Text könnte dabei zum Beispiel mit "<marquee scrollamount="60" scrolldelay="2">Ihre Nachricht</marquee> erzeugt werden.
  • Zuletzt könnten Sie den Laufschrift-Bereich auch noch gestalten. Dabei haben Sie zum Beispiel die Möglichkeit, die Höhe ("height") des Marquee-Bereichs einzustellen, eine Hintergrundfarbe festzulegen oder die Schriftfarbe des Textes anzupassen, wobei letzteres anhand des zusätzlichen font-Tags möglich ist. Für einen 50px hohen Bereich, der einen schwarzen Hintergrund und eine weiße Schrift haben soll, müssten Sie schreiben: <marquee bgcolor="#000" height="50px"><font color="#FFF">Ihre Nachricht</font></marquee>.
helpster.de Autor:in
Kevin Höbig
Kevin HöbigKevin ist ein alter Hase bei HELPSTER. Als Webdesigner und Mediengestalter, der auch auf journalistische Erfahrung zurückblicken kann, beschäftigt er sich nicht nur privat mit technischen Themen. Dank seines Wissens hilft er anderen oft mit praktischen Tipps weiter.
Teilen: