 Slide-Show 02-A (Autostart, Start- + Stopbuttons)
Automatisch gestarteter Bildwechsel für Grafiken und Fotos mit identischer Bildgröße. Die Slideshow kann per Mausklick angehalten und fortgesetzt werden. Diese Variante 2-A wurde erweitert für die Darstellung von bis zu 99 Bildern.
|
04.05.2007 Script erweitert für bis zu 99 Bilder
06.05.2007 3 weitere Bespiele zur Einbindung der Grafikquelle / Bild-URI
|
automatischer Bildwechsel - Version 2A
- automatischer Start
- scriptgesteuertes Blättern / automatische Diashow
- mit Start- / Stop-Funktion
- einstellbare Zeit für die Anzeigeintervalle
- einsetzbar für bis zu 99 Grafiken
- die Grafiken werden vorgeladen
automatischer Start der Show, Start- + Stopbuttons, max. 99 Grafiken
|
(Hintergrund: Sandpapier Download in meiner MINI-IMAGE-BOX)
Als Basis für dieses Beispiel diente ein Script von 'ShuvoRim'.
 Meine Modifikationen - Info einblenden / ausblenden
Ein Script von 'ShuvoRim' habe ich modifiziert. Das ursprüngliche Script war nur anwendbar, wenn das zu tauschende Image das erste Image der HTML-Seite war. Der Bezug auf das zu tauschende Bild wurde mit dem Befehl
document.images[0].src = img[counter].src;
hergestellt. Das funktioniert aber nur, wenn das 'Tauschbild' das Image Nr. 1 (für JavaScript das Image mit der Indexnummer 0) ist. Für einen HTML-Änfänger war das Sript in dieser Form unbrauchbar.
Steht das Image nicht an erster Stelle, müsste man die Anzahl der vorangestellten Images ermitteln und diesen Wert (minus 1) im Script eintragen. Das wäre natürlich auch auf jeder Seite ein unterschiedlicher Wert, die Arbeit fehlerträchtig und mühsam.
 originales Script im Window öffnen
|
Meine Modifikationen
- Ich vergebe nun eine ID für das auszutauschende Image (id="Bild01") und spreche im Script für den Bildtausch das Image mit der ID an ...
document.getElementById("Bild01")
... und vereinfache so die Anwendung.
- Variante mit Autostart, Variante mit festem Verzögerungswert
- Formatierung der Formularbuttons mittels CSS (nicht für NS4.x)
Voraussetzungen für die Funktion des Beispiels
- Die Grafiken haben die gleichen Abmessungen (Breite + Höhe),
- sie sind alle im gleichen Verzeichnis abgelegt,
- haben identische Dateinamen mit fortlaufender zweistelliger Nummer am Ende
Um eine Bildfolge bis 99 zu ermöglichen, sind die Zahlenwerte zweistellig!
Beispiel: Foto01.jpg, Foto02.jpg, Foto03.jpg, ... , Foto98.jpg, Foto99.jpg
So können sie das Beispiel anpassen
Zur Anpassung folgende Änderungen im Script:
| Beschreibung |
Variable |
hier im Beispiel |
ersetzen mit |
| Pfad + erster Teil der URL |
datenquelle |
../images/Foto |
Wert Text |
| Dateityp |
dateiendung |
jpg |
Dateiklasse |
| Anzahl der Grafiken |
anzahl_bilder |
15 |
Wert als Zahl |
| Anzeigezeit |
delayTime |
3000 |
Wert in ms |
|
Dazu hier einige Beispiele - So wird die Bildquelle eingetragen:
Beispiel 1)
nehmen wie einmal an die verwendeten Images blumen01.jpg, blumen02.jpg, ... sind im Unterordner 'images' abgelegt. Die vollständige URI für das erste Bild ist demzufolge:
images/blumen01.jpg
Da die fortlaufende Nummer (zwei Ziffern) vom JavaScript eingetragen wird, müssen sie lediglich den hier farbigen Teil der URI notieren.
| Beschreibung |
Variable |
hier im Beispiel |
ersetzen mit |
| Teil 1 der URI |
datenquelle |
"images/blumen" |
Pfad + erster Teil des Dateinamens |
| Teil 2 der URI |
dateiendung |
".jpg" |
Punkt + letzter Teil des Dateinamens |
|
Der Variablen 'datenquelle' wird der erste Teil der URI ohne die zweistellige Zahl, Punkt und Dateiendung zugeordnet. Tragen sie unbedingt die für sie zutreffende Informationen zur Datenquelle für die eingebundenen Bilder ein!
Bildquelle eintragen Beispiel 2) - Info einblenden / ausblenden
Beispiel 2)
Die verwendeten Images autos 01.jpg, autos 02.jpg, ... sind im gleichen Ordner wie die HTML-Seite abgelegt. Da die Pfadangaben entfallen ist die vollständige URI für das erste Bild demzufolge:
autos01.jpg
Da die fortlaufende Nummer (zwei Ziffern) vom JavaScript eingetragen wird, müssen sie lediglich den hier farbigen Teil der URI notieren.
| Beschreibung |
Variable |
hier im Beispiel |
ersetzen mit |
| Teil 1 der URI |
datenquelle |
"autos" |
erster Teil des Dateinamens |
| Teil 2 der URI |
dateiendung |
".jpg" |
Punkt + letzter Teil des Dateinamens |
|
Der Variablen 'datenquelle' wird der erste Teil der URI ohne die zweistellige Zahl, Punkt und Dateiendung zugeordnet. Tragen sie unbedingt die für sie zutreffende Informationen zur Datenquelle für die eingebundenen Bilder ein!
Bildquelle eintragen Beispiel 3) - Info einblenden / ausblenden
Beispiel 3 (der Extremfall)
Die verwendeten Images 01.jpg, 02.jpg, ...
- sind im gleichen Ordner wie die HTML-Seite abgelegt
- die Dateinamen bestehen nur aus zwei Ziffern
Die vollständige URI für das erste Bild ist demzufolge:
01.jpg
Da Angaben für den Pfad entfallen und der Dateiname lediglich aus zwei Ziffern besteht, die vom JavaScript eingetragen werden, bleibt die erste Variable leer. Sie müssen sie lediglich den hier günen Teil der URI notieren.
| Beschreibung |
Variable |
hier im Beispiel |
ersetzen mit |
| Teil 1 der URI |
datenquelle |
"" |
Pfad + erster Teil (bleibt leer) |
| Teil 2 der URI |
dateiendung |
".jpg" |
Punkt + letzter Teil des Dateinamens |
|
Der Variablen 'datenquelle' wird der erste Teil der URI ohne die zweistellige Zahl, Punkt und Dateiendung zugeordnet. Tragen sie unbedingt die für sie zutreffende Informationen zur Datenquelle für die eingebundenen Bilder ein!
Bildquelle eintragen Beispiel 4) - Info einblenden / ausblenden
Beispiel 4)
Die verwendeten Images klassenfoto 01.jpg, klassenfoto 02.jpg, ... sind im Ordner "../schule/fotos/" abgelegt. Die vollständige URI für das erste Bild ist demzufolge:
../schule/fotos/klassenfoto01.jpg
Da die fortlaufende Nummer (zwei Ziffern) vom JavaScript eingetragen wird, müssen sie lediglich den hier farbige Teil der URI notieren.
| Beschreibung |
Variable |
hier im Beispiel |
ersetzen mit |
| Teil 1 der URI |
datenquelle |
"../schule/fotos/klassenfoto" |
Pfad + erster Teil des Dateinamens |
| Teil 2 der URI |
dateiendung |
".jpg" |
Punkt + letzter Teil des Dateinamens |
|
Der Variablen 'datenquelle' wird der erste Teil der URI ohne die zweistellige Zahl, Punkt und Dateiendung zugeordnet. Tragen sie unbedingt die für sie zutreffende Informationen zur Datenquelle für die eingebundenen Bilder ein!
Übersicht der Varianten
Diese Slide-Show gibts in unterschiedlichen Varianten:
|
WWW.WEB-TOOLBOX.NET
Beispiel
Testbilder 
ZURÜCK 