 Diashow 03 - Pulldownmenü
Eine maunelle Diashow mit einem platzsparenden Pull-Down-Menü zur Auswahl der einzelnen Fotos finden Sie hier. Der Auswahltext kann bei entsprechend breitem Menü die Bilder treffend beschreiben.
|
|
» Bildpräsentation - Auswahl ausschließlich mit Pulldownmenü «
Einfaches Beispiel einer Bildauswahl mittels Pull-Down-Menü. Die umschießende Tabelle (dunkler Hintergrund), die Eigenschaften der Grafik und das Pulldown-Menü mit den Auswahlen habe ich über CSS-Anweisungen formatiert. Die CSS-Anweisungen beziehen sich auf Textformatierung, Farben und Ränder (siehe Quelltext).
Die Änderungen in diesem Update sind fast ausschließlich Formatierungsanweisungen die nun mit CSS umgesetzt werden. Das Script selbst ist in seiner Struktur unverändert. Ich verwende neue Grafiken. Eine Quelltextdatei und ein Download steht nun zur Verfügung.
Im HTML-Dokument wurden die Anweisungen für eine Grafik notiert (<img>-Tag). Diese Grafik soll mittels Drop-Down-Auswahl ausgetauscht werden. Voraussetzung: Für die Grafik die beim Start angezeigt wird, muss im <img>-Tag ein eindeutiger Name eingetragen werden. Hier in diesem Beispiel: 'Grafik01'.
<img name="Grafik01" src="grafik01-300.jpg" width="300" ... >
Aufwand zu Übernahme dieses Beispiels
Den Quellcode entnehmen Sie der Textdatei (Link oben in der Kopfzeile). Kopieren Sie die Code-Blöcke in ihre HTML-Datei.
- CSS-Anweisungen in den Head-Bereich kopieren
- JavaSCript-Code in den Head-Bereich kopieren
- Grafik im BODY-Bereich notieren
- Pulldown-Menü als Formular notieren
So funktionierts
Über den Namen wird die Grafik 'angesprochen'. Änderungen für die Eigenschaften dieser Grafik werden vom JavaScript 'befohlen' und beziehen sich dann eindeutig auf das Objekt mit diesem Namen. So kann man auch die Bildquelle ändern.
Bei einer Änderung in der Auswahl des Pull-Down-Menüs wird die neue Datenquelle, dem Objekt mit dem Namen 'Grafik01' zugeordnet! Umschrieben lautet die Anweisung in etwa:
"In diesem Dokument: Die neue Quelle (src) für das Objekt mit dem Namen 'Grafik01' ist das, was als Wert (value) nach der Änderung im Pull-Down-Menü ermittelt und dem Script übergeben wurde." Was in einer JavaScript-Anweisung etwa so aussieht:
document.Grafik01.src = "übergebener Wert"
Das Script im Head-Bereich:
<script type="text/javascript" language="JavaScript">
<!-- Begin
function zeigeBild(sel) {
document.Grafik01.src = "" + sel.options[sel.selectedIndex].value;
}
// End -->
</script>
Die Grafik im BODY-Bereich
Wichtig ist, das dem Bild im <img>-Tag ein eindeutiger Name zugeordnet wird. Denn bei einer Änderung in der Auswahl des Pulldown-Menüs wird ja die neue Datenquelle für das anzuzeigende Bild dem Objekt mit diesem Namen zugeordnet!
<img name="Grafik01" src="grafik01-300.jpg" width="300" ... >
Das Formular im Body-Bereich:
Zur Anpassung (mögliche) Änderungen im Formular:
| Element |
hier im Beispiel |
ersetzen mit |
| Startbild |
grafik01-300.jpg |
Dateiname |
| Beschreibungstext |
Web-Toolbox Desktop 01 |
Text |
| Beschreibungstext |
Web-Toolbox Desktop 02 |
Text |
 analog für weitere Bilder |
... |
... |
<form name="bildwahl">
<select size=1 onChange="zeigeBild(this)">
// hier die Quelle für die Bilder eintragen
<option class="sel01" value="grafik01-300.jpg"> Web-Toolbox Desktop 01
<option class="sel02" value="grafik02-300.jpg"> Web-Toolbox Desktop 02
<option class="sel01" value="grafik03-300.jpg"> Web-Toolbox Desktop 03
</select>
</form>
Meine Eintragungen für 'class' dienen lediglich der Formatiereung und ordnen den Elementen des Pulldownmenüs abwechselnd andere Hintergrundfarben zu. Die Anweisungen dazu stehen im CSS-Block im Head-Bereich der Seite.
|
Home • Bilder • Diashow 03
Quellcode
DOWNLOAD