 |
Ticker
Kompatibilität: Ms Internet
Explorer, Netscape
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,
Helvetica">[ <font
color=#808080><font size=-1>'+text.substring(0,
pos)+'</font></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
