brauchbar.de - WebDesign, Programmierung,Development in HTML, CSS, Javascript, PHP, Perl und mehr

[ Startseite | Artikel : HTML · JavaScript · CSS · Perl · Usability · Sonstiges | Services | Über ]


verwandte Artikel und Seiten

Ticker-3 mit Pause 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 Verzögerungen. 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 Verzögerungen:

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
// http://www.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, hier hevorgehoben dargestellt.

Dieser besagt folgendes: wenn das aktuelle Zeichen ein Strich ist, dann wird eine Variable erzeugt, die wir mit einem leeren String initialisieren. In diese Variable kopieren wir den durch die Striche umschlossenen Namen der Grafikdatei. 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.

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

<body OnLoad="tick();">

Schauen Sie sich nun ein Beispiel zur Verwendung an. Beachten Sie dort bitte die Hinweise.


Verwandte Artikel und Seiten



brauchbar web
Diese Site anlinken. Artikel zu CSS | HTML | JavaScript | Perl | Usability | Sonst. | nach Ausgabe.

Copyright © 1999-2015 Thomas Salvador und brauchbar.de . Alle Rechte vorbehalten. Gehostet bei all-inkl.
Reproduktion, ganz oder in Teilen, nur mit schriftlicher Zustimmung von Thomas Salvador. Impressum · Datenschutzerklärung · Kontakt.

zum Inhaltsverzeichnis der 20. Ausgabe.

Linken Sie bitte zu der festen Adresse http://www.brauchbar.de/wd/artikel/78.html .