 Diashow 01-A 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-A - manuelle Steuerung über Formularbuttons
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
Falls es Probleme gibt prüfen Sie die Doctype-Angaben ihres Dokuments (siehe Beispieldatei)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
- 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" ...
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:5px solid #000000" ...
2a CSS-Formatierung der Buttons
<input type="button" value="zurück" class="klein"
.klein {
height:18px;
width:80px;
font-family:Verdana,sans-serif;
font-size:10px;
color: #FFFFFF;
border:none;
border-bottom: 1px solid #1D56A7;
border-right: 1px solid #1D56A7;
background-image: url(b200-16.gif);
cursor: hand;
}
Die verwendete Hintergrundgrafik können sie herunterladen:
2b Oder als Inline-Formatierung der Buttons
<input type="button" value="zurück" style=" Angaben hier eintragen " ...
font-family: Verdana,sans-serif;
font-size: 13px;
color: #000000;
border-width: 1px;
background-color: #FFF1BE;
text-align: center;
width: 80px;
3 CSS-Formatierung des Pulldown-Menüs
<select class="pull" id="list"
.pull {
height:18px;
width:170px;;
font-family:Verdana,sans-serif;
font-size:11px;
color: #0070C0;
font-family: Arial;
margin:1px;
padding:1px;
border:1px solid #59ABF2;
background-color:#EFEFEF;
}
| 
Home • Bilder • Diashow 01-A
Beispiel
Download
