Showing images in certain layer from drop menu

**digi duck** · 06:05 AM

Hi i want the user to be able to select an image to appear in different layers from a drop down menu. This is the code i have:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body>
<div id="Layer1" style="position:absolute; left:261px; top:120px; width:480px; height:167px; z-index:1"> 
  <script language="JavaScript"><!--
function change(what) {
    value = what.options[what.selectedIndex].value;
    if (value != '')
        if (document.images)
            document.images['myImage'].src = value;
}
//--></script>
  <img src="../../../images.jpeg" name="myImage" width="481" height="157"></div>
<div id="Layer2" style="position:absolute; left:273px; top:173px; width:91px; height:87px; z-index:2"></div>
<div id="Layer1" style="position:absolute; left:261px; top:120px; width:480px; height:167px; z-index:1"> 
 
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<FORM>
  <div align="center">
    <select name="select" onChange="change(this)">
      <option>Select a Background: 
      <option value="<A href="http://i31.photobucket.com/albums/c376/wilko_jw/sig5green1.gif">Electric">http://i31.photobucket.com/albums/c376/wilko_jw/sig5green1.gif">Electric Green 
      <option value="<A href="http://i31.photobucket.com/albums/c376/wilko_jw/2ad6b10f.gif">Electric">http://i31.photobucket.com/albums/c376/wilko_jw/2ad6b10f.gif">Electric Yellow 
      <option value="<A href="http://i31.photobucket.com/albums/c376/wilko_jw/sig5blue1.gif">Electric">http://i31.photobucket.com/albums/c376/wilko_jw/sig5blue1.gif">Electric Blue
   <option value="<A href="http://i31.photobucket.com/albums/c376/wilko_jw/fb03cee8.gif">Electric">http://i31.photobucket.com/albums/c376/wilko_jw/fb03cee8.gif">Electric Red
   </select>
   </form>
   </p>
<form name="form1" method="post" action="">
  <select name="select2" onChange="change(this)">
    <option>Select a Foreground: </option>
    <option value="<A href="http://i31.photobucket.com/albums/c376/wilko_jw/houseofhalosigbarcopy.jpg">Image">http://i31.photobucket.com/albums/c376/wilko_jw/houseofhalosigbarcopy.jpg">Image 1
  </option>
  </select>
</form>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<FORM>
<div align="center"> 
</body>
</html>

I want the foreground selection to appear in layer 2 not layer 1.
Thanks for all your help.