Textticker mit einstellbaren Pausen und Grafik

von Thomas Salvador.

In Text-Ticker hatten wir einen einfachen Text-Ticker implementiert. In Text-Ticker mit einstellbaren Verzögerungen hatten wir diesen erweitert, um im Fließtext Pausen setzen zu können. Hier werden wir schließlich Anweisungen im Fließtext erlauben, die Grafiken laden und darstellen.

Definieren wir auch hier zunächst den Text:

var zeilen = new Array(
  'JavaScript Beispiele...',
  'Text - ein einfacher|a.gif| Text-Ticker...',
  'mit einstellbaren|b.gif| Verzoegerungen...',
  'und Grafik|c.gif|...',
  'etwas#1 mehr#2 tt... besserer#2 Effekt...'
);

Die Gatter "#" kennen Sie schon aus Text-Ticker mit einstellbaren Pausen. Sie dienen nach wie vor dazu, an der jeweiligen Stelle um x Sekunden zu verzögern, wobei x ein Wert zwischen 1 und 9 ist.

Neu sind die vertikalen Striche "|". Diese - wie Sie sicher vermuten - dienen dazu, einen Bereich zu begrenzen, der in unserem Fall den URL einer Grafik trägt.Wir erweitern unseren Ticker also dahingehend, dass wir diese Bereiche erkennen, und das Laden bzw. Darstellen der entsprechenden Grafik anweisen.

Dabei gehen wir hier so vor, dass wir nur die Darstellung anweisen. Dabei kommt es bei ersten Mal zu einer Verzögerung, bis die Grafik über das Netz übertragen wurde. Beim erneutem Darstellen wird der Browser die Grafik dann aus seinem Puffer (Cache) holen.

Eine effizientere Variante ist die, z.B. durch eine zusätzliche Funktion zunächst alle Grafiken laden (und damit puffern) zu lassen. Dem Autor geht es an dieser Stelle nur um die Demonstration der Möglichkeit und der Einbettung. Auch sollte man sich nach Meinung des Autors auf kleinere Grafiken beschränken.

Die Variablen haben die gleiche Bedeutung, wie bisher:

var delayLine=1000;
var delayChar=100;

var x = 0;
var y = 0;
var mx = zeilen[0].length;
var my = zeilen.length-1;
var zeile = '';

Die Implementation und Funktion von last() entspricht der im Text-Ticker mit einstellbaren Pausen:

function last() {
  if (x++ == mx) {
    x = 0;
    zeile = '';
    if (y++ == my) {
      y = 0;
    }
    mx = zeilen[y].length;
    return true;
  } else {
    return false;
  }
}

Schließlich noch der eigentliche Ticker:

function tick() {
  // Text-Ticker mit Pause und Grafik
  //
  // (c) 2000 by Thomas Salvador, Freeware, brauchbar.de
  //
  // Wiederverwendung erlaubt, solange dieser Hinweis vollstaendig
  // und unveraendert erhalten bleibt. Backlink zur Site erbeten.

  if (zeilen[y].charAt(x) == '#') {
    setTimeout('tick()', 1000*zeilen[y].charAt(x+1));
    x++;
    last();
  } else {
    if (zeilen[y].charAt(x) == '|') {
      var nam = '';
      x++;
      for (; zeilen[y].charAt(x) != '|';
        nam = nam+zeilen[y].charAt(x++)
      );
      if (document.images) {
        document.tickgfx.src = nam;
      }
      if (last()) {
        setTimeout('tick()', delayLine);
      } else {
        tick();
      }
    } else {
      zeile = zeile+zeilen[y].charAt(x);

      document.ticker.tickfeld.value = zeile+'#';
      window.status = zeile+'#';

      if (last()) {
        setTimeout('tick()', delayLine);
      } else {
        setTimeout('tick()', delayChar);
      }
    }
  }
}

Der hier neue Source ist der then-Zweig der zweiten if-Anweisung.

Dieser besagt folgendes: wenn das aktuelle Zeichen ein vertikaler Strich ist, dann wird eine Variable nam erzeugt, die wir mit einem leeren String initialisieren.

In diese Variable kopieren wir den durch die Striche umschlossenen Namen der Grafikdatei, indem wir solange Zeichen zeilen[y] an nam anhängen, bis wir auf den schließenden Strich getroffen sind.

Der Aufruf von last() kümmert sich um das Zeilenende.

War das Zeilenende nicht erreicht, so wird tick() sofort neu aufgerufen (Rekursion), um das nächste Zeichen zu bearbeiten. Damit vermeiden wir (in gewisser Form) Lauf-Schwankungen, wenn wir Grafiken z.B. zwischen Buchstaben darstellen lassen. Die Schwankungen lassen sich hier generell nur dann vermeiden, wenn die Grafiken gepuffert sind, also etwa beim zweiten Durchgang.

Die Grafik selbst wird im Image tickgfx dargestellt. Die Darstellung wird durch Zuweisung des Namens an die Eigenschaft src des Bildes angewiesen.

document.tickgfx.src = nam;

Wie üblich muss der Ticker einmal von Hand angestoßen werden:

<body onload="tick();">

Beispiel

In diesem Beispiel wollen wir folgenden Text ticken lassen.

var zeilen = new Array(
  'Auf brauchbar.de finden Sie Artikel zu...',
  'WebDevelopment und -Programmierung|/images/bsp78-1.gif| #3 ',
  'Bestellen Sie auch den NewsLetter|/images/bsp78-2.gif| #3 ',
  'Ist wohl etwas netter als die primitiven Standardticker :).'
);

<div align="center">
  <img src="/images/blind.gif" name="tickgfx" width="100" height="50" alt="" />
  <br><br>
  <form name="ticker">
  <input type="text" name="tickfeld" size="50" maxlength="50" />
</form></div>

liefert

In der Statuszeile können Sie den Ticker ebenfalls sehen, wenn Ihre Browser das unterstützt.

Der Autor empfiehlt, allen Bildern die gleiche reelle Ausdehnung (hier 100x50) zu geben und diese Ausdehnung auch bei der Vereinbarung des Image anzugeben.

Viel Spaß.