Javascript: Select-/Auswahlbox zur Navigation
Frage:
Wie macht man so eine Auswahlliste, wie bei den Gif's auf deiner Homepage?
Antwort:
Innerhalb eines Formulars die Auswahlbox per <select>- und <option>-tags erzeugen.
In das <select>-tag das Event "onchange" einbauen. Mit dem
"onchange" eine Javascript-Funktion verknüpfen, die die gewählte Seite
lädt. Wenn nun in der select-box ein anderer Eintrag angeklickt wird (der
markierte Eintrag sich also verändert hat = "onchange"), dann wird die
JavaScript-Funktion ausgeführt.
Hier zwei Varianten, wie im HEAD-Bereich das JavaScript eingebaut werden kann.
1) Einsatz in Frames:
frames[2] entspricht dem 3. Frame des aktuellen Framesets
(Bsp.: Links das navigationsframe[0], oben das selectboxframe[1] und in der Mitte das anzeigeframe[2]
<head>
<script language="JavaScript">
function sprung(ziel) {parent.frames[2].location.href=ziel;}
</script>
</head>
(Bsp.: Links das navigationsframe[0], oben das selectboxframe[1] und in der Mitte das anzeigeframe[2]
2) Einsatz ohne Frames:
<head>
<script language="JavaScript">
function sprung(ziel) {window.location.href=ziel;}
</script>
</head>
Im BODY-Bereich an der gewünschten Stelle die Select-Box erzeugen:
Zuerst ein Formular mit einem Namen (hier: xxx) definieren.
Dann die Selectbox mit einem Namen (hier: yyy) definieren.
Danach durch die <option> -tags die Selectbox mit Werten und deren Beschreibung füllen.
Per "onChange" im <select> -tag wird der Wechsel in der Liste erkannt
und der angeklickte Wert (hier z.B. seite1.html) an die
JavaScript-Funktion übergeben. Diese stellt dann die neue Seite im Frame bzw. neuen Window dar.
<body>
<form name="xxx">
<select name="yyy"
onChange="sprung(document.xxx.yyy.options[document.xxx.yyy.selectedIndex].value)"
size="1">
<option value="seite1.html">Seite 1 anzeigen</option>
<option value="seite2.html">Seite 2 anzeigen</option>
</select>
</form>
...