Java Script : Auswahlliste Grafik







Zurück zur Java Scripts-Hauptseite.

Auswahllisten oder auch Pulldownmenüs genannt sind platzsparende Navigationselemente. In folgenden Beispielen werden sie zum Anzeigen von Grafiken genutzt.

Auswahlliste um Grafiken zu laden:

Code zwischen <head> </head> einfügen:

<script language="javascript" type="text/javascript">
<!--
function imgchange()
{
var si = document.frm.selbox.selectedIndex;
var fname = document.frm.selbox.options[si].value
document.img.src = fname
}
//-->
</script>

HTML-Code dort einfügen wo die Auswahlbox erscheinen soll:

<form name="frm">
<select name="selbox" size=1>
<option value="bildname1.gif">Bildbeschreibung 1
<option value="bildname2.gif">Bildbeschreibung 2
<option value="bildname3.gif">Bildbeschreibung 3
</select>
<input type="button" value="laden" onclick="imgchange()">
</form>

HTML-Code dort einfügen wo die Grafik erscheinen soll:

<img src="Bildname.gif" width="48" height="48" border="0" NAME="img">

Haben die zu ladenden Grafiken unterschiedliche Größen, sind die Parameter width="xx" height="xx" zu entfernen. Die als erstes zu ladende Grafik muß noch einmal extra im igm Tag angegeben werden.

Auswahlliste um vorgeladene Grafiken anzuzeigen:

Code zwischen <head> </head> einfügen:

<script language="javascript" type="text/javascript">
<!--
image1= new image();
image1.src = "Bildname1.gif";
image2= new image();
image2.src = "Bildname2.gif";
image3= new image();
image3.src = "Bildname3.gif";

function imgchange1(){
var imagenum = document.form.selimage.selectedindex + 1;
fname = eval("image" + imagenum + ".src")
document.img1.src = fname
}
//-->
</script>

HTML-Code dort einfügen wo die Auswahlbox erscheinen soll:

<form name="form">
<select name="selimage" size=1>
<option>Bild 1
<option>Bild 2
<option>Bild 3
</select>
<input type="button" value="anzeigen" onclick="imgchange1()">
</form>

HTML-Code dort einfügen wo die Grafik erscheinen soll:

<img src="Bildname.gif" width="48" height="48" border="0" NAME="img1">

Haben die zu ladenden Grafiken unterschiedliche Größen, sind die Parameter width="xx" height="xx" zu entfernen. Die als erstes zu ladende Grafik muß noch einmal extra im igm Tag angegeben werden.



Kontaktformular - Copyrighthinweis und Impressum
zurück zur vorherigen Seite (nur mit Java Script)