Laufschriften - Website X5 Hilfe - Die Helpsite

Direkt zum Seiteninhalt

Hauptmenü:

Laufschriften

Scripte > Text- & Tabellenobjekte

Scrollende Lauftexte horizontal oder vertikal generieren.

Automatisch bewegende Textezeilen in Webseiten sind mittlerweile nicht mehr wegzudenken. So bieten sich aber auch vielseitige Einsatzmöglichkeiten an, wie z. B. die Verkündung von Neuigkeiten, aktuellen Nachrichten oder anderen Informationen.
Es ist kein großer Aufwand, solche Lauftexte mit einfachen Mitteln in Javascript zu programmieren, so dass sie mit allen gängigen Browsern kompatibel sind.
Eine ganz einfache Möglichkeit, einen Lauftext einzubinden, ist das marquee-Element. Dieses wurde ursprünglich von Microsoft entwickelt und lief deshalb auch ursprünglich nur im Internet Explorer, wird aber heute auch von anderen Browsern unterstützt. Trotzdem es bis heute nicht zum offiziellen Standard gehört, ist da der erste Ansatz.

Bei der Verwendung von <marquee>...</marquee>-Tag ohne Attribute wird eine Laufschrift standardmäßig von rechts nach links erzeugt. Mit einigen Attributen kann man das Verhalten des Lauftextes beeinflussen:

direction="..."

left
right
up
down

Erstellt einen Lauftext, der von links nach rechts läuft.
Erstellt einen Lauftext, der von rechts nach links läuft (Voreinstellung).
Erstellt einen Lauftext von unten nach oben.
Erstellt einen Lauftext von oben nach unten.

scrollamount="..."

Wert (Zahl)

Bestimmt die Pixelanzahl zwischen den Scrollzuständen.
Je höher der Wert ist, desto schneller scrollt der Text.

scrolldelay="..."

Wert (Zahl)

Legt die Verzögerung zwischen zwei Scroll-Zuständen in Millisekunden fest.
Je höher der Wert ist, desto langsamer scrollt der Text.

beavior="..."

alternate

Bewirkt, dass der Text hin und her scrollt.
Standardeinstellung ist von rechts nach links in Wiederholung.

align="..."

top
middle
bottom

Mit Hilfe dieser Werte, kann man den umgebenen Text des <marquee>...</marquee>-Tags entsprechend ausrichten.

bgcolor="..."

#XXXXX

Hiermit lässt sich die Hintergrundfarbe des Scrolltextes ändern.

height="..."

Wert (Zahl)

Die Höhe des Scrollbereiches wird hiermit definiert.
Die Angabe erfolgt entweder in Pixeln, oder in Prozent.

hspace="..."

Wert (Zahl)

Abstand zwischen dem Text und den Elementen davor und dahinter.
Die Angabe erfolgt in Pixeln.

Code für das HTML-Objekt (Lauftext oben):

[Objekt HTML]

<script type="text/javascript">
/* var text = Angezeigter Lauftext */
var text = "+++ Das ist ein Lauftext mit Javascript. +++ Javascript muss dazu installiert und aktiviert sein";
var begin = 0;
var end = text.length;
function lauftext()
{
document.getElementsByName("newsticker")[0].value = "" +
text.substring(begin,end) + " " + text.substring(0,begin);
begin ++;
if(begin >= end)
{
 begin = 0;
}
/* Laufgeschwindigkeit: Höhere Zahl = langsamer */
window.setTimeout("lauftext()", 150);
}
</script>

<input type="text" name="newsticker" style="
color: #FF0000;
/* Textfarbe */
font-size:22px;
/* Texthöhe */
font-weight: bold; /* Textstärke */
font-family: times new roman; /* Textfamilie */
border-color: none; /* Rahmenfarbe  */
border-style: none;
/* Rahmenstyle  */
border-width: 1px; /* Rahmenstärke  */
background-color: transparent;
/* Textfeldfarbe */
padding:10px;
/* Textabstand zum Rahmen */
width: 700px; /* Textfeldbreite */
">

[Im Tag BODY]

Code innerhalb BODY-Tag:
onload="lauftext()"
Wer nicht mit Website X5 arbeitet:
<body onload="lauftext()">

Code für das HTML-Objekt (Lauftext unten):

[Objekt HTML]

<script type="text/javascript">
/* var text = Angezeigter Lauftext */
var text2 = "+++ Das ist der Lauftext rückwärts mit Javascript. +++ Javascript muss dazu installiert und aktiviert sein";
var begin2 = 0;
var end2 = text2.length;
var cnt = 0;
function lauftext2()
{
document.getElementsByName("newsticker2")[0].value = "" +
text2.substring((end2-cnt),end2) + " " +
text2.substring(begin2,(end2-cnt));
cnt++;
if(cnt >= end2)
{
 cnt = 0;
}
/* Laufgeschwindigkeit: Höhere Zahl = langsamer */
window.setTimeout("lauftext2()", 150);
}
</script>

<input type="text" name="newsticker2" style="
color: #FF7921;
/* Textfarbe */
font-size:16px; /* Texthöhe */
font-weight: normal; /* Textstärke */
font-family: Comic Sans MS;
/* Textfamilie */
border-color: #7c6031;
/* Rahmenfarbe  */
border-style: solid; /* Rahmenstyle  */
border-width: 1px; /* Rahmenstärke  */
background-color: #EEF6E8;
/* Textfeldfarbe */
padding:10px;
/* Textabstand zum Rahmen */
width: 600px;
/* Textfeldbreite */
">

[Im Tag BODY]

Code innerhalb BODY-Tag:
onload="lauftext2()"
Wer nicht mit Website X5 arbeitet:
<body onload="lauftext2()">

Das ist ein ganz einfacher Lauftext mit marquee. Dieser Text kann beliebig geändert werden.

Code für das HTML-Objekt:

[Objekt HTML]

<marquee width="700">
<font style="font-size: 18px; font-weight: bold;">
Das ist ein ganz einfacher Lauftext mit marquee. Dieser Text kann beliebig geändert werden.
</font></marquee>

Das ist ein gesteuerter einfacher Lauftext mit marquee. Dieser Text kann beliebig geändert werden.

Code für das HTML-Objekt:

[Objekt HTML]

<marquee width="700" behavior="scroll" direction="left" scrolldelay="2" scrollamount="2">
<font style="font-family: Arial; font-size: 18px; font-weight: bold;">
Das ist ein gesteuerter einfacher Lauftext mit marquee. Dieser Text kann beliebig geändert werden.
</font></marquee>

Das ist ein gesteuerter einfacher farbiger Lauftext mit marquee.

Code für das HTML-Objekt:

[Objekt HTML]

<marquee width="700" behavior="alternate" direction="left" scrolldelay="5" scrollamount="5">
<font style="font-family: Arial; font-size: 18px; color: #ff0000;">
Das ist ein gesteuerter einfacher farbiger Lauftext mit marquee.
</font></marquee>  

Das ist ein gesteuerter einfacher Lauftext mit marquee und farbigem Hintergrund.
Laubblatt  Ein wenig mit Bildchen und wirkt gleich ganz anders.  Laubblatt

Code für das HTML-Objekt:

[Objekt HTML]

<marquee width="700" bgcolor="#ABCDEF" height="55" behavior="alternate"
direction=
"right" scrolldelay="5" scrollamount="5">
<font style="font-family: Arial; font-size: 18px; color: #000000;">
<center>Das ist ein gesteuerter einfacher Lauftext mit marquee und farbigem Hintergrund.<br>
<img src="images/leaf.gif" alt="Laubblatt"/>
&nbsp;Ein wenig mit Bildchen und wirkt gleich ganz anders.&nbsp;
<img src="images/leaf.gif" alt="Laubblatt"/>
</center></font></marquee>

Dieser Lauftext wird nur fünf mal wiederholt, bei loop zu ändern.
Dieser Lauftext wird nur fünf mal wiederholt, und ist zweileilig.

Code für das HTML-Objekt:

[Objekt HTML]

<marquee width="700" direction="left" loop="5" align="middle" height="45"
bgcolor=
"#ABCDEE" scrolldelay="15">
<font style="font-family: Arial; font-size: 18px; color: #ff0000;">
Dieser Lauftext wird nur fünf mal wiederholt, bei loop zu ändern.
<br>
Dieser Lauftext wird nur fünf mal wiederholt, und ist zweileilig.
</font></marquee>

Laubblatt Das ist ein Lauftext mit Grafik. Dieser Text kann beliebig geändert und erweitert werden. Laubblatt

Code für das HTML-Objekt:

[Objekt HTML]

<marquee width="700" scrollamount="3"><img src="images/leaf.gif" alt="Laubblatt"/>
<font style="font-family: Comic Sans MS; font-size: 18px; color: #FF7921;">
Das ist ein Lauftext mit Grafiken. Dieser Text kann beliebig geändert und erweitert werden.
<img src="images/leaf.gif" alt="Laubblatt"/></font></marquee>

Das ist ein Laufschrift-Ticker mit einem Link zum Gästebuch: Hier bitte klicken. Herzlichen Dank.

Code für das HTML-Objekt:

[Objekt HTML]

<marquee width="700">
<font style="font-family: Times New Roman; font-size: 18px; color: #3399FF;">
Das ist ein Laufschrift-Ticker mit einem Link zum Gästebuch:
<a href="http://www.x5forum.home-wiekau.de/guestbook.php">
Hier bitte klicken. Herzlichen Dank.
</a></font></marquee>

Laubblatt Das ist ein Lauftext mit Grafik. Dieser Text kann geändert werden.
Das ganze nun einmal von oben nach unten.
Das benötigt natürlich auch in der Höhe mehr Platz.
Und wenn man den Text nach unten hin kopiert, wird er wiederholt.
Das ist ein Lauftext mit Grafik. Dieser Text kann geändert werden.
Das ganze nun einmal von oben nach unten.
Das benötigt natürlich auch in der Höhe mehr Platz.
Und wenn man den Text nach unten hin kopiert, wird er wiederholt.
Das ist ein Lauftext mit Grafik. Dieser Text kann geändert werden.
Das ganze nun einmal von oben nach unten.
Das benötigt natürlich auch in der Höhe mehr Platz.
Und wenn man den Text nach unten hin kopiert, wird er wiederholt.
Das ist ein Lauftext mit Grafik. Dieser Text kann geändert werden.
Das ganze nun einmal von oben nach unten.
Das benötigt natürlich auch in der Höhe mehr Platz.
Und wenn man den Text nach unten hin kopiert, wird er wiederholt.
Das ist ein Lauftext mit Grafik. Dieser Text kann geändert werden.
Das ganze nun einmal von oben nach unten.
Das benötigt natürlich auch in der Höhe mehr Platz.
Und wenn man den Text nach unten hin kopiert, wird er wiederholt.
Das ist ein Lauftext mit Grafik. Dieser Text kann geändert werden.
Das ganze nun einmal von oben nach unten.
Das benötigt natürlich auch in der Höhe mehr Platz.
Und wenn man den Text nach unten hin kopiert, wird er wiederholt.
Laubblatt

Code für das HTML-Objekt:

[Objekt HTML]

<marquee width="700" scrollamount="3" direction="up">
<img src="images/leaf.gif" alt="Laubblatt"/>
<font style="font-family: Comic Sans MS; font-size: 18px; color: #FF7921;">
Das ist ein Lauftext mit Grafik. Dieser Text kann geändert werden.
<br>
Das ganze nun einmal von oben nach unten.
<br>
Das benötigt natürlich auch in der Höhe mehr Platz.
<br>
Und wenn man den Text nach unten hin kopiert, wird er wiederholt.
<br>
Das ist ein Lauftext mit Grafik. Dieser Text kann geändert werden.
<br>
Das ganze nun einmal von oben nach unten.
<br>
Das benötigt natürlich auch in der Höhe mehr Platz.
<br>
Und wenn man den Text nach unten hin kopiert, wird er wiederholt.
<br>
Das ist ein Lauftext mit Grafik. Dieser Text kann geändert werden.
<br>
Das ganze nun einmal von oben nach unten.
<br>
Das benötigt natürlich auch in der Höhe mehr Platz.
<br>
Und wenn man den Text nach unten hin kopiert, wird er wiederholt.
<br>
<img src="images/leaf.gif" alt="Laubblatt"/></font>
</marquee>

Laubblatt
Das ist ein Lauftext mit Grafik. Dieser Text kann geändert werden.
Das ganze nun einmal auch umgekehrt, von unten nach oben.
Das benötigt natürlich auch in der Höhe mehr Platz.
Und wenn man den Text nach unten hin kopiert, wird er wiederholt.
Das ist ein Lauftext mit Grafik. Dieser Text kann geändert werden.
Das ganze nun einmal auch umgekehrt, von unten nach oben.
Das benötigt natürlich auch in der Höhe mehr Platz.
Und wenn man den Text nach unten hin kopiert, wird er wiederholt.
Das ist ein Lauftext mit Grafik. Dieser Text kann geändert werden.
Das ganze nun einmal auch umgekehrt, von unten nach oben.
Das benötigt natürlich auch in der Höhe mehr Platz.
Und wenn man den Text nach unten hin kopiert, wird er wiederholt.
Das ist ein Lauftext mit Grafik. Dieser Text kann geändert werden.
Das ganze nun einmal auch umgekehrt, von unten nach oben.
Das benötigt natürlich auch in der Höhe mehr Platz.
Und wenn man den Text nach unten hin kopiert, wird er wiederholt.
Das ist ein Lauftext mit Grafik. Dieser Text kann geändert werden.
Das ganze nun einmal auch umgekehrt, von unten nach oben.
Das benötigt natürlich auch in der Höhe mehr Platz.
Und wenn man den Text nach unten hin kopiert, wird er wiederholt.
Das ist ein Lauftext mit Grafik. Dieser Text kann geändert werden.
Das ganze nun einmal auch umgekehrt, von unten nach oben.
Das benötigt natürlich auch in der Höhe mehr Platz.
Und wenn man den Text nach unten hin kopiert, wird er wiederholt.
Laubblatt

Code für das HTML-Objekt:

[Objekt HTML]

<marquee width="700" scrollamount="3" direction="down">
<img src="images/leaf.gif" alt="Laubblatt"/>
<div
align="left">
<font style="font-family: Tahoma; font-size: 18px; color: blue;">
Das ist ein Lauftext mit Grafik. Dieser Text kann geändert werden.
<br>
Das ganze nun einmal auch umgekehrt, von unten nach oben.
<br>
Das benötigt natürlich auch in der Höhe mehr Platz.
<br>
Und wenn man den Text nach unten hin kopiert, wird er wiederholt.
<br>
Das ist ein Lauftext mit Grafik. Dieser Text kann geändert werden.
<br>
Das ganze nun einmal auch umgekehrt, von unten nach oben.
<br>
Das benötigt natürlich auch in der Höhe mehr Platz.
<br>
Und wenn man den Text nach unten hin kopiert, wird er wiederholt.
<br>
Das ist ein Lauftext mit Grafik. Dieser Text kann geändert werden.
<br>
Das ganze nun einmal auch umgekehrt, von unten nach oben.
<br>
Das benötigt natürlich auch in der Höhe mehr Platz.
<br>
Und wenn man den Text nach unten hin kopiert, wird er wiederholt.
<br>
<img src="images/leaf.gif" alt="Laubblatt"/>
</div></font></marquee>


Das marquee-Element kann man natürlich auch für die Anzeige von Bildern nutzen. Dazu hier mehr.

Feedbacks zu ""

es gibt insgesamt 1 Kommentar(e)


  1. Benu schreibt am 11.11.2014, 14.28 Uhr

    hallo, bin ein wenig am lernen und stosse an die grenzen. sehr gute, lehrreiche, spannende und informative hp, die du da hast. ich habe mir erlaubt, mit einer laufschrift zu arbeiten und es auszuprobieren. leider ist es so, dass die schrift am oberen ende kleben bleibt und ich sie nicht ein mitten kann. Neue Resultate oder Ranglisten vorhanden was bitte mache ich falsch? danke für den Input und die hilfe
    Admin-Antwort: Ein Link zum ansehen und eine Info mit welchem Programm Du die Webseite gestaltest wäre hilfreich. Es gibt diverse Möglichkeiten die Laufschriften anzupassen bzw. auszurichten. Ggf. kontaktiere mich über mein Kontaktformular möglichst mit mehr Informationen.


Name*
Vorname
Kommentar*
Email *
Homepage
Telefon
Sicherheitscode *
 
Logo HTML5
Button Spenden

© 2009 - 2018




  Besucher Statistik
 » 3 Online
 » 6 Heute
 » 639 Woche
 » 3419 Monat
 » 41109 Jahr
 » 287687 Gesamt
Rekord: 1420 (10.04.2014)
Zurück zum Seiteninhalt | Zurück zum Hauptmenü