Laufschriften - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
Scan QR or Download Android App
Direkt zum Seiteninhalt

Laufschriften

Scripte > Text- & Tabellenobjekte

Lauftexte horizontal oder vertikal mit Marquee oder Javascript

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.
HTML-Code einfach nur kopieren und im Body zwischen <body>.....</body> an gewünschter Stelle einfügen. Pfade zu Links und zu den Bilddateien sind dann noch anzupassen.

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:
Download Button
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 den <BODY> Bereich
<div style="color: #ff0000; font-size: 20px;">
<script>
// Der Tex tohne Zeilenumbrueche bzw <br>
tText=' + + + spezialisiert auf Klein- und Mittelbetriebe + + + Vertrauen bewegt + + + Fairness und Transparenz + + + Vertrauen bewegt + + + unkompliziert, schnell und effektiv + + + Vertrauen bewegt + + + direkte Kommunikation, kurze Wege + + + Vertrauen bewegt + + + hervorragendes Preis-Leistungsverhältnis + + + Vertrauen bewegt + + + ';
// Zeit zwischen jedem "Tick" in msec
tInterval=200;
// Sollte Leeraum im Ticker entstehen, hier einen höheren Wert wählen
tNr=4;
// Onmouseover Ticker anhalten? true oder false
tStop=true;
// Der Tickercode
if(document.getElementsByTagName('title')&&document.getElementsByTagName('title')[0].innerHTML) {
var tGo;
tStop=tStop?' onmouseover="clearInterval(tGo)"onmouseout="tGo=setInterval(\'ticken()\',tInterval);"':'';
tCnt=0;
tHtml='<span>'+tText+'</span>';
document.write('<pre id="ticker"style="overflow:hidden;"'+tStop+'>');
for(i=0;i<tNr;++i){document.write(tHtml);}
document.write('</pre>');
function ticken() {
tObj=document.getElementById('ticker');
tTxt=String(tObj.firstChild.innerHTML);
isTag=false;isTxt=false;
for(i=0;i<tTxt.length;++i) {
if(tTxt.charAt(i)=='>') {
isTag=false;continue;
}
if(tTxt.charAt(i)=='<') {
isTag=true;continue;
}
if(!isTag) {
tObj.firstChild.innerHTML=tTxt.substring(0,i)+tTxt.substring(i+1,tTxt.length);
isTxt=true;break;
}
}
if(!isTxt) {
tObj.removeChild(tObj.firstChild);
tObj.innerHTML+=tHtml;
}
}
tGo=setInterval("ticken()",tInterval);
}
</script>
</div>
Code für den <BODY> Tag
onload="lauftextObj152_1();"

Wer nicht mit Website X5 arbeitet:
<body onload="lauftextObj152_1();"
Code für den <BODY> Bereich
<script>
// var textObj152_1 = Angezeigter Lauftext
var textObj152_1 =
"+++ Das ist ein Lauftext mit Javascript. +++ Javascript muss dazu installiert und aktiviert sein";
var beginObj152_1 = 0;
var endObj152_1 = textObj152_1.length;
function lauftextObj152_1() {
document.getElementsByName("newstickerObj152_1")[0].value = "" +
textObj152_1.substring(beginObj152_1,endObj152_1) + " " +
textObj152_1.substring(0,beginObj152_1);
beginObj152_1 ++;
if(beginObj152_1 >= endObj152_1) {
beginObj152_1 = 0;
}
// Laufgeschwindigkeit: Höhere Zahl = langsamer
window.setTimeout("lauftextObj152_1()", 150);
}
</script>
<input type="text" name="newstickerObj152_1" 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 */
">
Code für den <BODY> Tag
onload="lauftextObj152_2();"

Wer nicht mit Website X5 arbeitet:
<body onload="lauftextObj152_2();"

Entfällt bei  Button-Nutzung!
Code für den <BODY> Bereich
<script>
// var textObj152_2 = Angezeigter Lauftext
var textObj152_2 =
"+++ Das ist der Lauftext rückwärts mit Javascript. +++ Javascript muss dazu installiert und aktiviert sein";
var beginObj152_2 = 0;
var endObj152_2 = textObj152_2.length;
var cnt = 0;
function lauftextObj152_2() {
document.getElementsByName("newstickerObj152_2")[0].value = "" +
text2.substring((endObj152_2-cnt),endObj152_2) + " " +
text2.substring(beginObj152_2,(endObj152_2-cnt));
cnt++;
if(cnt >= endObj152_2) {
cnt = 0;
}
// Laufgeschwindigkeit: Höhere Zahl = langsamer
window.setTimeout("lauftextObj152_2()", 150);
}
</script>
<input type="text" name="newstickerObj152_2" 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 */
">
<!-- hier mit Button, dann kein <body onload="lauftextObj152_2();"> einbauen -->
<button class="std_btn" onClick="lauftextObj152_2();">
Text ansehen.
</button>
Das ist ein ganz einfacher Lauftext mit marquee. Dieser Text kann beliebig geändert werden.
Code für den <BODY> Bereich
<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 den <BODY> Bereich
<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 den <BODY> Bereich
<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 den <BODY> Bereich
<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, ggf. Seite aktualisieren:
Dieser Lauftext wird nur fünf mal wiederholt, bei loop zu ändern.
Dieser Lauftext wird nur fünf mal wiederholt, und ist zweizeilig.
Code für den <BODY> Bereich
<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 zweizeilig.
</font>
</marquee>
Laubblatt Das ist ein Lauftext mit Grafik. Dieser Text kann beliebig geändert und erweitert werden. Laubblatt
Code für den <BODY> Bereich
<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.
</font>
<img src="images/leaf.gif" alt="Laubblatt"/>
</marquee>
Das ist ein Laufschrift-Ticker mit einem Link zum Gästebuch: Zum Gästebuch hier klicken.
Code für den <BODY> Bereich
<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:
Zum Gästebuch <a href="http://www.x5forum.home-wiekau.de/wsx5sys06.php">hier</a> klicken.
</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 den <BODY> Bereich
<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>
</font>
<img src="images/leaf.gif" alt="Laubblatt"/>
</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 den <BODY> Bereich
<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>
</font>
<img src="images/leaf.gif" alt="Laubblatt"/>
</div>
</marquee>

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


» nach oben «
Logo Host Europe
Button Spenden
🏠 © 2009 - 2024
Hosting by
Zurück zum Seiteninhalt