The JavaScript instructions are shown below in bold.

<HTML>
<HEAD>
<TITLE>JavaScript Demo Example 10 HTML</TITLE>
<script language="javascript" type="text/javascript">
<!-- Hide script from older browsers

var stars = new Array("starblue.gif", "stargold.gif", "stargren.gif", "starpurp.gif",
"starslvr.gif", "staryell.gif");

var descriptions = new Array("Heroic attempt to save a human life.",
"National Outstanding Service.", "Arduous or hazardous rescue attempt.",
"Saving a human life.", "Runner-up to the recipient of the Gold Merit Star.",
"Outstanding act, service, or accomplishment.");

function displayStar(starForm) {
var itemSelect = starForm.starItem.selectedIndex;
document.star8.src = stars[itemSelect];
document.starForm.starDescription.value = descriptions[itemSelect];
}
//-->
</script>

</HEAD>
<BODY BGCOLOR="WHITE">

<h3>Choose a list-item and utilize it to display image and text array elements.</h3>
<table>
<tr>
<td>
<form name="starForm">
<p><b>Please choose one<br>
of the following stars:</b></p>
<select name="starItem" onchange="displayStar(starForm)">
<option>Blue Star
<option>Gold Star
<option>Green Star
<option>Purple Star
<option>Silver Star
<option>Yellow Star
</select>
<p><b>This star is awarded for:</b></p>
<input type="text" name="starDescription" size="50" value="Heroic attempt to save a human life.">
</form>
</td>
<td valign="middle">
<img src="starblue.gif" name = "star8" border="0">
</td>
</tr>
</table>

<p>&nbsp;</p>
<p><a href="index.htm">Return to Having Fun with JavaScript</a>.</p>

</BODY>
</HTML>

 

Return to Example 10.