<html>
<head>
<!--start of code-->
<!-- first pre-load images -->
<script type="text/javascript">
<!--//
var text1=new Image();
var text2=new Image();
var text3=new Image();
var text4=new Image();
text1.src="text1.gif";
text2.src="text2.gif";
text3.src="text3.gif";
text4.src="text4.gif";
<!-- done pre-loading -->
var URLToGo;
function ShowAlert(){
alert('Choose a new page from the menu');
}
function Writer()
{
Indx=document.form1.Select1.selectedIndex;
if (Indx==0)
{
document['descriptionImage'].src=text0.src;
}
if (Indx==1)
{
document['descriptionImage'].src=text1.src;
URLToGo="index.html"
}
if (Indx==2)
{
document['descriptionImage'].src=text2.src;
URLToGo="alerts.htm" }
if (Indx==3)
{
document['descriptionImage'].src=text3.src;
URLToGo="WindowNew.htm"
}
if (Indx==4)
{
document['descriptionImage'].src=text4.src;
URLToGo="MenuSelectOnChange.htm"
}
}
//New Function
function GoToURL()
{
MyDestination=URLToGo;
if(MyDestination!=null)
{
location=MyDestination;
}
else{
ShowAlert();}}
//-->
</script>
<title>
Image Descriptions
</title>
</head>
<body vlink="green" alink="blue" link="red" background="backg2.gif">
<h2>
<a href="http://www.trans4mind.com/personal_development/index.html">
Ken Ward's Java
Script Tutorial ...
</a>
</h2>
<h1>
Drop-down Menus with Text Descriptions 2 - using images
</h1>
<div align="left">
<table border="0" cellpadding="0" width="100%">
<tr>
<td width="50%" valign="top">
<form id="form1" name="form1" alt="">
<div align="center">
<center>
<p>
<select id="Select1" name="Select1" size="1" onchange="Writer();return false;">
<option selected value="Choose a Page and Go!">
Choose a Page and Go!
</option>
<option>
Contents of the Java Script Tutorial
</option>
<option>
All about message boxes
</option>
<option>
Everything about Windows
</option>
<option>
Menus Without Buttons
</option>
</select>
</p>
</center>
</div>
<div align="center">
<center>
<p>
<a HREF onclick="GoToURL();return false;">
<img src="GoButton.gif" width="120" height="50" alt="Go to selected page" border="0" />
</a>
</p>
</center>
</div>
</form>
<p>
Select a page from the menu above, and then:
<a href="#" onclick="GoToURL();return false;">
Go to URL
</a>
</p>
</td>
<td width="50%" valign="top">
<img src="text0.gif" width="200" height="100" alt="Description of the page selected" id="descriptionImage" name="descriptionImage" border="0" />
</td>
</tr>
</table>
</div>
</body>
</html>