 Slide-Show 02-C (Start- + Stopbuttons)
Manuell gestarteter Bildwechsel für Grafiken und Fotos mit identischer Bildgröße. Die Slideshow kann per Mausklick gestartet und angehalten werden. Die Zeit für die Anzeige können sie im Script festlegen.
automatischer Bildwechsel - Version 02-C
- automatisches Blättern / Diashow mit Start- Stop-Funktion
- einstellbare Zeit für die Anzeigeintervalle
- die Slide-Show startet erst auf 'Knopfdruck'
- (zur Zeit noch) für maximal 9 Grafiken
Hier habe ich gemogelt und gegen die Regeln verstoßen. Die angezeigten Images sind in Wirklichkeit 350 x 350 px groß werden aber nur in den Maßen 140 x 140 Pixel angezeigt. Da sie aber lediglich 5 kB groß sind und für die Beispielansichten ohnehin in dem Großformat benötigt werden, erspare ich das erneute Laden vom Server.
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 Nummer am Ende
Beispiele: pic1.gif, pic2.gif, pic3.gif, ...
| Foto1.jpg, Foto2.jpg, Foto3.jpg, ...
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)
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 |
6 |
Wert als Zahl |
| Anzeigezeit |
delayTime |
2000 |
Wert in ms |
|
Hier ein Beispiel - So wird die Bildquelle eingetragen:
Beispiel:
Die verwendeten Images pic1.gif, pic2.gif, pic3.gif, ..., sind im Unterordner 'images' abgelegt. Die vollständige URI für das erste Bild ist demzufolge:
images/pic1.gif
Da die fortlaufende Nummer (eine Ziffer) 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/pic |
Pfad + erster Teil des Dateinamens |
| Teil 2 der URI |
dateiendung |
.gif |
Punkt + letzter Teil des Dateinamens |
|
Der Variablen 'datenquelle' wird der erste Teil der URI ohne die einstellige 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 
Pictures ZIP 
ZURÜCK 