 |
Ticker
Was wurde nicht alles unternommen, um Ticker auf die Homepage zu
bringen und entsprechend vielfältig sind auch die verschiedenen
Versionen. Die meisten sind natürlich in Java programmiert, in der
ja bekanntlich alles möglich ist, aber auch einige
Javascript-Ticker gibt es, die kontinuierlich den Inhalt eines
Eingabefeldes mit einem immer grösseren Teilstück einer Nachricht
füllen. Besonders schön sieht das natürlich nicht aus, da man ja
auf die Darstellungsweise des Eingabefeldes beschränkt ist.
Neben der schon bei 'Laufschrift'
vorgestellten Möglichkeit einen Ticker mit einer bewegten Ebene in
Dynamic HTML zu realisieren, gibt es noch eine andere, bessere Möglichkeit.
Und zwar durch die dynamische Änderung von Ebeneninhalten - eine
sehr mächtige Funktionalität, mit der man in Zukunft noch eine
Menge anstellen kann.
Fangen wir gleich an: Nach der üblichen Einleitung definieren
wir im Skript-Teil die nötigen Variablen, darunter vor allem das
Feld "msg", in dem die Nachrichten stehen, die
der Reihe nach ausgegeben werden sollen.
<html><head><title>Ticker1</title>
<script language="javascript">
<!--
var delay=20;
var nextm=0;
var msg=new Array
(
'Samsung liefert neue TFT-Displays',
'Festplattenrekord von IBM',
'G3-Rechner von Apple unerwartet erfolgreich',
'Bereits 6 Millionen Surfer in Deutschland'
);
Die folgende kleine Funktion dient lediglich als Einstieg für
den "onload()"-Event:
function start_ticker()
{
do_ticker(msg[0], 0, 1);
}
Jetzt kommt unsere Hauptroutine, die kontinuierlich aufgerufen wird.
Als Parameter übergeben wir ihr den Tickertext, die Positeon an der
wir uns im Text gerade befinden und in welche Richtung der Text
aufgebaut werden soll.
In der folgenden Zeile setzen wir die HTML-Ausgabe zusammen und zwar
mithilfe von "substring" nur den Anfang der
Nachricht bis zur aktuellen Positeon. Wichtig sind die " "-Sonderzeichen,
für die wir nicht einfach Leerzeichen verwenden können, da ja auch
im Nachrichtentext Leerzeichen vorkommen und in HTML bei zwei
nebeneinanderliegende Leerzeichen nur eines ausgegeben wird. Beim
Ersetzen des Ebeneninhalts müssen wir natürlich wieder auf die
beiden Browsertypen achten und entsprechend unterschiedliche Befehle
verwenden: Während beim Internet Explorer der Ebene einfach mit "innerHTML"
der neue Inhalt zugewiesen werden kann, behandelt der Netscape
Navigator die Ebene wie ein Fenster - zuerst muss sie mit "open()"
geöffnet werden, um dann mit "write()" etwas
hineinzuschreiben. Auch das abschliessende "close()"
sollte nicht fehlen. Das umschliessende "with()"
nimmt uns übrigens nur ein wenig Tipparbeit ab, denn damit ersparen
wir uns vor jeden der Befehle die komplette Objektbezeichung ("document.ticker.document")
zu setzen.
function do_ticker(text, pos, dir)
{
var out='<font face="Arial">[ <font color=#808080
size=1>'+text.substring(0,pos)+'</font> ]</font>';
if(navigator.appName=="Netscape")
with(document.ticker.document)
{
open(); write(out); close();
}
else
ticker.innerHTML=out;
Im folgenden Teil erhöhen, bzw. erniedrigen wir die Textlänge - je
nachdem, ob "dir" positev oder negativ ist. Dann
testen wir ob das Ende des Textes erreicht ist und wenn ja, starten
wir die Ticker-Routine, nach einer etwas längeren Wartezeit als
normal, neu, diesmal allerdings mit umgekehrter Richtung. Sind wir
in negativer Richtung unterwegs und am Anfang des Textes angelangt,
holen wir uns die nächste Nachricht aus dem Array "msg".
Die Variable "nextm" zeigt jeweils auf die
aktuelle Nachricht. So oder so rufen wir mittels "setTimeout()"
die Ticker-Routine wiederholt auf.
pos+=dir;
if(pos>text.length)
{
setTimeout('do_ticker("'+text+'",'+pos+','+(-dir)+')',
delay*10);
} else
{
if(pos<0)
{
if(++nextm>=msg.length)
nextm=0;
text=msg[nextm];
dir=-dir;
}
setTimeout('do_ticker("'+text+'",'+pos+','+dir+')',
delay);
}
}
Nach dem Skriptende folgen die eigentlichen HTML-Befehle. Im "<body>"-Tag
aktivieren wir mit dem "onload()"-Event den
Ticker. Dann erzeugen wir mit "<div>...</div>"
die Ebene in der der Tickertext erscheinen soll. Wichtig ist der
Name den wir ihr mit dem "id"-Parameter geben. Wo
sich die Ebene auf dem Bildschirm befindet können wir im "style"-Parameter
mit "top" und "left"
bestimmen.
// -->
</script>
<body bgcolor=ffffff onload="start_ticker()">
<div id="ticker" style="positeon: absolute; top:
10; left: 10;"></div>
</body></html>
|
|
|
DIENSTE
