DHTML-Ticker
Microsoft bietet mit dem <MARQUEE>-Tag eine Möglichkeit, eine Laufschrift beliebig zu formatieren und anzuzeigen. Leider versteht aber Netscape diesen <MARQUEE>-Tag nicht. Eine Möglichkeit (für Überschriften), die im NN4+ und IE4+ funktioniert, siehst Du hier. Das Script wurde noch nicht auf Netscape 6, Mozilla und IE 6 angepasst!
Vorbereitung:
Im <head> legst du folgendes an:
<style type="text/css">
#ticker{position:absolute;top:70;left:15%;}
</style>Die Werte nach top und left geben an, wo der Ticker später erscheint. Weiterhin legst du folgendes Script im <head> ab:
<script language="javascript1.2" type="text/javascript">
txt0=' ';
txt1=' ... Dies ist ein DHTML-Ticker... ';
txt2=' ... der ab den Browserversionen... ';
txt3=' ... NN 4 und IE 4 funktioniert... ';
txt4=' ... Besser als das Marquee von M$ ;-) ...';
function wandleSpaces(c) {
if(c.indexOf(' ')!=-1) {
// folgendes in eine Zeile!
cneu=c.substring(0,c.indexOf(' '))+' '+
c.substring(c.indexOf(' ')+1,c.length);
if(cneu.indexOf(' ')!=-1) wandleSpaces(cneu);
return cneu;
}
else return c;
}
function tick(text,pos) {
var c1=text.substring(pos, pos+1);
var c2=text.substring(pos+1, pos+txtBreite-1);
var c3=text.substring(pos+txtBreite-1, pos+txtBreite);
if(c1==' ') c1=' ';
if(c3==' ') c3=' ';
c2=wandleSpaces(c2);
// folgendes in eine Zeile!
var schrift='<span style="font-family:Courier;
font-size:22px;font-weight:bold;color:#00CCFF"><
font color="#99FFFF">'+c1+'</font>'+c2+'
<font color="#99FFFF">'+c3+'"/font></span>';
if(document.layers){
document.ticker.document.open()
document.ticker.document.write(schrift);
document.ticker.document.close();
}
else if (document.all) ticker.innerHTML=schrift;
pos+=1;
if(pos<text.length)
{setTimeout('tick("'+text+'",'+pos+')', tempo);}
else
{tick(txt0+txt1+txt2+txt3+txt4,0);}
}
function init() {
if(document.layers)
{ txtBreite=innerWidth/20; tempo=100; }
else
if(document.all)
{ txtBreite=document.body.offsetWidth/20; tempo=140; }
if (document.all || document.layers)
{tick(txt0+txt1+txt2+txt3+txt4,0);}
}
</script>Im <body> vermerkst du zusätzlich:
<body onLoad="setTimeout('init()',200)" ...>
<div id="ticker"></div>
