Mini-Bildergalerie
    
HOME
BEISPIEL  DOWNLOAD  ZURÜCK  SITEMAP  

  Bildauswahl

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.

Einfaches Mini-Beispiel einer Bildauswahl mittels Pull-Down-Menü.



Gleich unter dem Pull-Down-Menü wurde ein Bild notiert. Dieses Bild soll mittels Drop-Down-Auswahl ausgetauscht werden. Wichtig: Im <img>-Tag muss ein eindeutiger Name eingetragen sein. Hier in diesem Beispiel: 'minibild'. 
<img name="minibild" src="museum2.jpg" width="128" ... >



   So funktionierts

Bei einer Änderung in der Auswahl des Pull-Down-Menüs wird die neue Datenquelle für das anzuzeigende Bild, dem Objekt mit dem Namen 'minibild' zugeordnet! Umschrieben lautet die Anweisung in etwa:

"In diesem Dokument: Die neue Quelle (src) für das Objekt mit dem Namen 'minibild' 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.minibild.src = "übergebener Wert"



   Das Script im Head-Bereich: 


<script type="text/javascript" language="JavaScript">
<!-- Begin

function zeigeBild(sel) {
document.minibild.src = "" + sel.options[sel.selectedIndex].value;
}

//  End -->
</script>



   Das Formular im Body-Bereich:

Zur Anpassung (mögliche) Änderungen im Formular:

Element    hier im Beispiel   ersetzen mit  
anzuzeigendes Bild 1 museum2.jpg Dateiname
Beschreibungstext Haus Basten Text
 analog für weitere Bilder - - 


<form name="bildwahl">

<select size=1 onChange="zeigeBild(this)">

// hier die Quelle für die Bilder eintragen

<option value="museum2.jpg"> Haus Basten
<option value="rad2.jpg"> Infotafel Rad
<option value="ruhe2.jpg"> Bank am Weiher 
<option value="schloss2.jpg"> Burg Tips

</select>

</form>



   Das Image

Wichtig ist, das dem Bild im <img>-Tag ein eindeutiger Name zugeordnet wird. Denn bei einer Änderung in der Auswahl des Pull-Down-Menüs wird ja die neue Datenquelle für das anzuzeigende Bild dem Objekt mit diesem Namen zugeordnet!

Zur Anpassung (mögliche) Änderungen in der Bildnotierung:

Element    hier im Beispiel   ersetzen mit  
Basisbild museum2.jpg Dateiname
Bildbreite 128 Wert in Pixel
Bildhöhe 128 Wert in Pixel 


<img name="minibild" src="museum2.jpg"
width="128" height="128" border="1" alt="">





NACH OBEN