Images wechseln mit Zeitvorgabe
    
 Home • Bilder • automatischer Bildwechsel Download  BEISPIEL  QuellCode 

 automatischer Bildwechsel 03-Link  (Grafik als Verweis)

Eine Startgrafik mit einer fest zugewiesenen ID wird angezeigt. Eine JavaScript-Schleife zeigt nacheinander alle bereitgehaltenen Grafiken. Nach der Anzeige der letzten Grafik beginnt der Durchlauf wieder mit Grafik 1 der Liste.

Jede eingeblendete Grafik ist als Verweis anklickbar

Die Informationen für den Bildwechsel mit Link werden in 2 Arrays bereitgehalten. Ein Array beinhaltet die URLs für die anzuzeigende Grafiken, das andere die URLs für die Verweisziele. Die Links können sowohl auf projektinterne Seiten (als relativer Link) als auch auf projektfremde Seiten (als absoluter Link mit http://www) verweisen.

Denkbar wäre ein Einsatz als Start einer Fotopräsentation mit mehreren Seiten oder aber für eine Linkseite.

Als Demo sehen sie rechts ein Beispiel für Bildverweise auf verschiedene Webseiten. 7 Grafiken (Screenshots der Seiten) werden im zeitlichen Abstand von 2 Sekunden angezeigt. Nach dem Ende des Durchlaufs beginnt ein erneuter Durchlauf (Loop).

Im Download finden sie eine HTML-Datei des Beispiels mit den zugehörigen Grafiken.


   Eigenschaften

  • Die Anzahl ist nicht begrenzt
  • die URL für jede Grafik kann individuell notiert werden
  • für jede Grafik wird 1 zugehöriger Verweis notiert
  • die Anzeigezeit (Intervall) kann angepasst werden.
  • die Startverzögerung kann angepasst werden.
    Bedingungen

a) identische Bildmaße
b) Netscape ab Version 3
c) Explorer ab Version 4


   Aufwand zur Übernahme dieses Beispiels

Den Quellcode entnehmen sie der Textdatei (Link oben in der Kopfzeile) und kopieren die Elemente in ihre HTML-Datei.
  • JavaSCript-Code in den Head-Bereich kopieren
  • URL der Bilder im Array eintragen
  • URL der zugehörigen Verweise im Array eintragen
  • Link und <img>-Tag für das erste Bild in ihrem Dokument notieren
  • im Image-Tag die ID 'Grafik03' eintragen
  • im Link-Tag die ID 'Link03' eintragen





Das war's schon! Wenn sie mehr über Funktion und Anpassungen erfahren möchten, lesen sie ab hier weiter. Sie können bei diesem Script die Anzahl der anzuzeigenden Bilder erweitern, indem sie im Array weitere Eintäge notieren.



   Funktion

Die Adressen (URLs) für die anzuzeigenden Bilder werden in ein Register (Array) eingetragen. Ebenso werden die Adressen (URLs) für die zugehörigen Links in ein Register (Array) eingetragen. Dem im BODY notierten Startbild und auch dem Link wurde eine ID zugewiesen (attribut 'id') . Das JavaScript ändert die URL für das jeweils anzuzeigende Bild im festgelegten Intervallen (2000 ms). Die Informationen für die Bild-URLs und Link-URLs werden den Registern (Arrays) entnommen.

Das wird so lange wiederholt, bis alle eingetragenen Bilder angezeigt wurden. Danach wird der interne Zähler zurückgesetzt und ein neuer Durchlauf beginnt.

Zuweisung der ID: 
<a target="_blank" id="Link03" href="javascript:void(0)">
<img id="Grafik03" src="startgrafik.gif" ... alt="">
</a>



   Anpassungen

Ich habe mit Absicht die Zuweisung der Bildquellen (URLs) nicht zur Vereinfachung in eine Schleife eingebunden. So können Grafiken aus unterschiedlichen Ordnern eingebunden werden.

Zuordnung der Bild-URLs im Script (siehe auch Quelltextauszug unten):

Element Variable Zuweisung im Beispiel ersetzen mit
Bild 1 ImageArr[ImageArr.length] bild01.gif Pfad/Dateiname
Bild 2 ImageArr[ImageArr.length] bild02.gif Pfad/Dateiname
(analog für weitere Bilder)
Link 1 URLArr[URLArr.length] http://www.web-toolbox.net/ URL
Link 2 URLArr[URLArr.length] ../seite28.htm Pfad/Dateiname
(analog für weitere Links)



Zur Anpassung der Variablenwerte im Script:

Element Variable Zuweisung im Beispiel ersetzen mit
Anzeigezeit WechselZeit 2000 Wert in ms
Startverzögerung   1000 Wert in ms



   JavaScript

Die Anzahl der Eintrage für die Bild-URLs werden nun automatisch ermittelt. 
// Anzeigezeit in ms
var WechselZeit = 2000;


ImageArr = new Array()
URLArr = new Array()


// URL der Bilder + URL der Links hier eintragen

ImageArr[ImageArr.length] = "screen-22.gif";
URLArr[URLArr.length] = "http://www.web-toolbox.net/webmaster/wilhelm2/";

ImageArr[ImageArr.length] = "screen-23.gif";
URLArr[URLArr.length] = "http://www.web-toolbox.net/geilenkirchen/";

ImageArr[ImageArr.length] = "screen-24.gif";
URLArr[URLArr.length] = "http://www.web-toolbox.net/imagedownload/";

ImageArr[ImageArr.length] = "screen-25.gif";
URLArr[URLArr.length] = "http://www.web-toolbox.net/webtoolbox/";

ImageArr[ImageArr.length] = "screen-26.gif";
URLArr[URLArr.length] = "http://www.web-toolbox.net/maus/";

ImageArr[ImageArr.length] = "screen-27.gif";
URLArr[URLArr.length] = "http://www.web-toolbox.net/imagedownload/";

ImageArr[ImageArr.length] = "screen-28.gif";
URLArr[URLArr.length] = "http://www.web-toolbox.net/";


var xAnzahl = ImageArr.length;
var xCounter = -1;

function Bildwechsel01() {
xCounter = xCounter+1;
  if (xCounter < xAnzahl) {
     document.getElementById('Grafik03').src = ImageArr[xCounter];
     document.getElementById('Link03').href = URLArr[xCounter];
     setTimeout ("Bildwechsel01()",WechselZeit);
     }
  else {
     xCounter = -1;
     Bildwechsel01();
     }
}

// Startverzögerung
setTimeout('Bildwechsel01()', 1000);

zeitverzögerter Start = 1000 ms (1 Sekunde)












automatischer Bildwechsel 01-A (ohne Link) - zeitgesteuert für 1 Bildserie

automatischer Bildwechsel 01-B (ohne Link) - zeitgesteuert für 2 Bildserien

Link des Monatstages - 1 von 31 Grafiken als Verweis

Monatslink - 1 von 12 Grafiken als Verweis

Diashow manuelle Steuerung

Ein manueller Bildwechsel mit optionaler Zufallsfunktion
für das erste angezeigte Bild. Zusätzlich wir der
zugehörige Erlärungstext eingeblendet