 Slide-Show 02-B (Autostart, ohne manuelle Steuerung)
Automatisch gestarteter Bildwechsel für bis zu 99 Grafiken und Fotos mit identischer Bildgröße. Die Zeit für die Anzeige können sie im Script anpassen. Auch diese Variante 2-B wurde erweitert für die Darstellung von bis zu 99 Bildern.
|
18.04.2008 Beispiel völlig überarbeitet
18.04.2008 neue Grafiken im Bilddownload (pictures.zip)
06.05.2007 Script erweitert für bis zu 99 Bilder
06.05.2007 3 weitere Bespiele zur Einbindung der Grafikquelle / Bild-URI
|
 Meine Modifikationen - Info einblenden / ausblenden
Änderungen 18.April 2008: Der Bezug auf das zu tauschende Bild wird nicht mehr über den Objektnamen sonder über eine ID hergestellt. Dazu erhält die in die HTML-Seite eingefügte und zu Beginn anzuzeigende Grafik das Attribut 'ID' mit dem eingetragenen Wert 'Bild01'.
|
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")
- Variante mit Autostart: mit festem Start-Verzögerungswert
- Formatierung der Formularbuttons mittels CSS (nicht für NS4.x)
- Erweiterung des Scripts für bis zu 99 Tauschbilder
Eigenschaften
- automatisches Blättern
- ohne Start- Stop-Funktion
- einstellbare Zeit für die Anzeigeintervalle
- automatischer Start
- einsetzbar für bis zu 99 Grafiken
- die Grafiken werden vorgeladen
|
|
Voraussetzungen für die Funktion des Beispiels
- Die Grafiken haben die gleichen Abmessungen (Breite + Höhe),
- Die Grafiken sind alle im gleichen Verzeichnis abgelegt und
- haben identische Dateinamen mit fortlaufender zweistelliger Nummer am Ende
Beispiele: pic01.gif, pic02.gif, pic03.gif, ...
| blumen01.jpg, blumen02.jpg, blumen03.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/blumen |
Wert Text |
| Dateityp |
dateiendung |
jpg |
Dateiklasse |
| Anzahl der Grafiken |
anzahl_bilder |
6 |
Wert als Zahl |
| Anzeigezeit |
AnzeigeZeit |
3500 |
Wert in ms |
|
Hier einige Beispiele - So wird die Bildquelle eingetragen:
Beispiel 01:
Die verwendeten Images foto01.jpg, foto02.gif, foto03.jpg, ..., sind im Unterordner 'images' abgelegt. Die vollständige URI für das erste Bild ist demzufolge:
images/foto01.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/foto |
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:
|
Home
Demo 01 
Fotos ZIP 
ZURÜCK 