<html>
<head>
<title>Image Displayer</title>
<!-- Cut-N-Paste JavaScript from ISN Toolbox
Copyright 2000, Infohiway, Inc. Restricted use is hereby
granted (commercial and personal OK) so long as this code
is not *directly* sold and the copyright notice is buried
somewhere deep in your HTML document. A link to our site
http://www.infohiway.com is always appreciated of course,
but is absolutely and positively not necessary. ;-) -->
<!--Script courtesy of Roland Hentschel
rolandbln@berlin.snafu.de Copyright 2000.
Free use of this script as long as this
header remains intact.-->
<script language="JavaScript">
<!--
//** Set up your array in this format:
//** "category*"+"element1image=element1displayname|
//** element2image=element2displayname|
//** element3image=element3displayname|",
//** repeat for additional categories and elements.
//** As you can see from the data below, the display
//** name is optional and can be left out.
var menu_data = [
"Säugetiere*"+
"ani_adda|ani_ante=Antilope|ani_bact=Kamel|ani_bat=Fledermaus|ani_biso=Bison|ani_cham=Gemse",
"Vögel*"+
"bir_chic=Hahn|bir_corm=Kormoran|bir_eagl=Adler|bir_falc=Falke|bir_gull=Möwe|bir_hawk=Bussard",
"Insekten*"+
"ins_cric=Grille|ins_flie=Fliege|ins_horn=Hornisse|ins_locu=Heuschrecke",
"Muscheln*"+
"mol_cutt=Mollusk|mol_jant|mol_purp|mol_stro",
"Pflanzen*"+
"pla_acac=Akazie|pla_aloe=Aloe|pla_aoak=Eiche|pla_bdel|pla_boxt|pla_cann",
"Reptilien*"+
"rep_cham=Chamäleon|rep_frog=Frosch|rep_geck=Gekko|rep_moni|rep_sala=Salamander|rep_skin|"+
"rep_snak=Schlange"
];
/**************************************************************/
//**Do not change the rest of the script.
var dummy = '~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~';
var dummy1 = dummy+"*";
var menu = new Array ();
//menu[0] = dummy1;
for (var i in menu_data) menu[menu.length] = menu_data[i]+'|';
menu[menu.length] = dummy1;
var names = new Array ();
var items = new Array ();
var full_href = ''
/**************************************************************/
function InitForms () {
var name = document.menu_form.menu_name;
name.length = names.length;
for (var i=0;i<names.length;i++) {
name.options[i].value = names[i][0];
name.options[i].text = names[i][0];
}
name.options.selectedIndex=0;
updateMenus(name);
name.focus();
}
/**************************************************************/
function showImage ( where ) {
var name = where.form.menu_name.options;
var item = where.form.items.options;
if (item.selectedIndex>=0 && item.selectedIndex<item.length-1)
{
document.images['display'].src=item[item.selectedIndex].value+'.gif';
} else {item.selectedIndex=0;
document.images['display'].src=item[item.selectedIndex].value+'.gif';
}
}
/**************************************************************/
function updateMenus ( what ) {
var sel = what.selectedIndex;
act = items[sel];
what.form.items.length = act.length;
for (var i in act) {
var test = new Array();
test[0] = act[i];
test[1] = act[i];
if (act[i].indexOf('=')!=-1) {
test = act[i].split('=');
}
what.form.items.options[i].text = test[1];
what.form.items.options[i].value = test[0];
}
what.form.items.selectedIndex = -1;
document.images['display'].src="blank.gif"
};
/**************************************************************/
function createMenus () {
items[0]=dummy1+dummy1;
for (var i in menu) {
names[i] = (menu[i]).split('*');
items[i] = (names[i][1]+dummy).split('|');
};
var form_string =
'<form name="menu_form">\n'+
'<table>\n<tr>\n<td width="50%">\n'+
'<select name="menu_name" size="' + (names.length-1)
+
'" onChange="updateMenus(this)">\n' +
'<option>'+dummy+'\n' +
'</select>\n'+
'</td>\n<td width="50%">\n'+
'<select name="items" size=" ' + (names.length-1) +
'" onChange="showImage(this)">\n' +
'<option>'+dummy+'\n' +
'</select>\n'+
'</td>\n</tr>\n</table>\n'+
'</form>\n';
document.write ( form_string );
}
// -->
</script>
<link rel="stylesheet" href="../../../liora3.css"
type="text/css">
</head>
<!-- Be sure to include the onLoad event handler in your body tag-->
<body bgcolor="#004080" onLoad="InitForms()">
<center>
<!--Insert this code in the spot where you want the
select menus to appear-->
<script language="javascript">createMenus
()</script>
<!--The table below creates the spot on the page where
the images will
display. Adjust the size of blank.gif to create the correctly sized
table cell for your images. The image name must remain as 'display'.-->
<table border="2" cellspacing="0"
cellpadding="0" bgcolor="#E5D26B"><tr><td>
<img src="blank.gif" width="300" height="300"
name="display">
</td></tr></table>
</center>
<!--More content, whatever, can go here.-->
</body>
</html>
|
