JavaScript Tutorials

Menu with images

menu_with_images.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Menu with images</title>
<script type="text/javascript">
function demoShowImage()
{
var demoExpandMenu = document.getElementById('options');
document.demoPhoto.src = demoExpandMenu.options[demoExpandMenu.selectedIndex].value;
}
</script>
<style type="text/css">
<!--
#demoDisplayMenu {float: left; width: 250px; height:200px; background:#fff;}
-->
</style>
</head>
<body>
<div id="demoDisplayMenu">
<select name="options" id="options" style="background:#f5f5f5;" onchange="demoShowImage();">
<option value="spacer.gif">choose an image ...</option>
<option value="computer_01.gif">Image 01</option>
<option value="computer_02.gif">Image 02</option>
<option value="computer_03.gif">Image 03</option>
</select>
</div>
<div><img src="spacer.gif" name="demoPhoto" id="demoPhoto" width="250" height="200" /></div>
</body>
</html>
Menu with images
JavaScript Tutorials
Other Tutorials