 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
Link des Monatstages - 1 von 31 Grafiken als Verweis
Monatslink - 1 von 12 Grafiken als Verweis
Ein manueller Bildwechsel mit optionaler Zufallsfunktion
für das erste angezeigte Bild. Zusätzlich wir der
zugehörige Erlärungstext eingeblendet
Diashow manuelle Steuerung
|
|
|
WWW.WEB-TOOLBOX.NET
Download 
BEISPIEL 
ZURÜCK