Rollover using Dropdown Box help

[Randor]

ok, i am trying to do a simple dropdown box that when a user clicks on one of the items and image rollover happens and they can see the object they are selecting, however i am not real good in JS and i tried to modify an existing code and i think i completly screwed it up...

I need the dropdown box to look something like this:

Code: Select all

<select size="7" name="btl" >
    <option value="111">1</option>
    <option value="112">2</option>
    <option value="113">3</option>
    <option value="114">4</option>

this is so that when they click submit, the value is just this number, now, the images are saved in a seperate location named 111.gif, 112.gif, etc...

i tried adding this:

Code: Select all

OnClick=document.arrow.src=this.options[this.selectedIndex].value;

but all it did was change the src in the image to 111 or 112, etc...

how can i get it to change the src in the image to something along these lines:

http://www.mysite.com/images/111.gif and
http://www.mysite.com/images/112.gif accordingly??

any help is appreciated...

[rangana]

Don't use onclick, better of the onchange property

...Give your select tag an id...for instance select and an onchange attribute to call for the function

<select id="select" onchange="change()">

....Also, give your image an id of (for instance) myimage

..Then try this script

Code: Select all

<script type="text/javascript">
function change()
{
   switch (document.getElementById("select").value)
   {
      case "111":
      document.getElementById("myimage").src='images/111.gif'
      break;
      case "112":
      document.getElementById("myimage").src='images/112.gif'
      break;
      case "113":
      document.getElementById("myimage").src='images/113.gif'
      break;
     case "114":
      document.getElementById("myimage").src='images/114.gif'
      break;
   }
}
</script>