 Diashow 01-B manuell
Eine Möglichkeit der Präsentation ihres Online-Fotoalbums. Eine wirklich einfach zu modifizierende Diashow mit Vor- und Zurück-Buttons und einem Pulldownmenü.
|
|
Diashow 01-B - manuelle Steuerung über grafische Buttons
Alle darzustellenden Bilder werden in der Options-Liste des Pulldowns notiert. Durch das JavaScript werden diese Notierungen automatisch in die Vor-/Zurück-Blättern-Funktion einbezogen.
Grafiken in die Auswahl eintragen
So tragen sie ihre Grafiken in die Liste ein:
<option value="grafik07-300.jpg">Web-Toolbox Desktop 01</option>
<option value="grafik03-300.jpg">Web-Toolbox Desktop 02</option>
<option value="grafik04-300.jpg">Web-Toolbox Desktop 03</option>
<option value="grafik05-300.jpg">Web-Toolbox Desktop 04</option>
<option value="grafik06-300.jpg">Web-Toolbox Desktop 05</option>
<option value="grafik08-300.jpg">Web-Toolbox Desktop 06</option>
<option value="grafik09-300.jpg">Web-Toolbox Desktop 07</option>
<option value="grafik10-300.jpg">Web-Toolbox Desktop 08</option>
Arbeitsaufwand
- Script im Head-Bereich notieren
- Grafik oberhalb des Pulldownmenüs notieren
- Attribut 'name' im Image-Tag notieren
- Liste der Optionen im Pulldownmenü eintragen
Attribut 'name' zuweisen:
<img name="Foto" ...
Verwendete Grafiken in diesem Beispiel:
 
Formatierungen (optional)
Die Tabelle, das Pulldownmenü, den Rahmen der Grafik und auch die Formularbuttons können sie mit CSS-Anweisungen formatieren. Dazu habe ich in diesem beispiel CSS-Klassen im HEAD-Bereich notiert. Die Zuweisung der CSS-Klassen erfolgt über das Attribut 'class'.
1 CSS-Formatierung des Rahmens der angezeigten Grafik
<img style="border:1px solid #FFFFFF;" ...
2 CSS-Formatierung des Pulldown-Menüs
<select class="pull" id="list"
.pull {
font-family: Verdana,Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:12px;
border: 1px solid #46468C;
background-color: #46468C;
width:250px;
height:20px;
padding:2px;
}
| 
Home • Bilder • Diashow 01-B
ScriptCode
