<!-- Part of javalessons.com (c)2007 SEMM(NL) All rights reserved Author:P.Hamaker For educational purposes only.-->
<html>
<head>
<script type="text/javascript">
var imgprev = 'img1';
function doit( val )
{
 var elm = document.getElementById('imc');
 if ( val != 'prev' )
 {
   elm.src = val + '.png' ;
   if ( val != 'imgh' ) imgprev = val ;
 }
 else
   elm.src = imgprev + '.png' ;
}
function dorbs()
{
 var elarr = document.getElementsByName('group1');
 for ( var i=0; i < elarr.length ; i++ )
 {
   if ( elarr[i].checked ) {
     doit( elarr[i].value );  return;
   }  
 }
}
</script>
</head>
<body style="font-family: sans-serif; font-size: large; margin-left: 20; margin-top: 30">
JavaScript Lesson Images
<form>
<table><tr valign="bottom"><td>
<select onchange="doit( this.value )">
<option value="img1" selected="selected">Nature</option>
<option value="img2">Culture</option>
<option value="img3">Framework 2</option>
</select>
</td><td>
<img src="img1.png" id="imc" alt="some image"
  onmouseover="doit('imgh')" onmouseout="doit('prev')"
  width="200" height="100">
</td><td>
<input type="radio" name="group1" value="img1" checked="checked" >Nagual<br>
<input type="radio" name="group1" value="img2">Bwana<br>  
<input type="radio" name="group1" value="img3">Sahib<br>  
</td><td>
<input id="bt1" type="button" value="Do radio buttons" onclick="dorbs()">
<input type="reset" value="Clear" onclick="doit('img1')">
</td></tr></table>
</form>
</body></html>