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.
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:
direction="..." | left right up down | Erstellt einen Lauftext, der von links nach rechts läuft. |
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 msectInterval=200;// Sollte Leeraum im Ticker entstehen, hier einen höheren Wert wählen
tNr=4;
// Onmouseover Ticker anhalten? true oder falsetStop=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 = langsamerwindow.setTimeout("lauftextObj152_1()", 150);}
</script>
<input type="text" name="newstickerObj152_1" style="
<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();"
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 = langsamerwindow.setTimeout("lauftextObj152_2()", 150);}
</script>
<input type="text" name="newstickerObj152_2" style="
<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>
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>
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>
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>
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"/> Ein wenig mit Bildchen und wirkt gleich ganz anders.
<img src="images/leaf.gif" alt="Laubblatt"/>
</center>
</font>
</marquee>
Dieser Lauftext wird nur fünf mal wiederholt, ggf. Seite aktualisieren:
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>
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>
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>
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></font>Und wenn man den Text nach unten hin kopiert, wird er wiederholt.<br>
<img src="images/leaf.gif" alt="Laubblatt"/>
</marquee>
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></font>Und wenn man den Text nach unten hin kopiert, wird er wiederholt.<br><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 «