title: Changing Image Based On Form Selection
body: <p>I'm trying to figure out the best way to go about doing this.This is one form that I'm trying to create and not 3 different forms. </p>
  
  <p><a href="http://www.amazinsounds.com/form-image-if.png" rel="nofollow">http://www.amazinsounds.com/form-image-if.png</a></p>
  
  <p>Sorry I couldn't post the image representation as I don't have rep 10 just yet.</p>
  
  <p>As a user selects a color the image will change. When a circle position is selected the image will change. Each one being something different. I've done a search here, but I've yet to come up with anything solid in terms of direction. The only thing close that i've seen that helped understand a little is this:</p>
  
  <pre><code>&lt;HTML&gt;&lt;HEAD&gt;&lt;SCRIPT&gt;
  // preload images
  var img1 = new Image().src = "../images/jht.gif"
  var img2 = new Image().src = "../images/jsht.gif"
  var img3 = new Image().src = "../images/pht.gif"
  
  function setImage(imageSelect) {
   theImageIndex = imageSelect.options[imageSelect.selectedIndex].value;
   if (document.images)
       document.images[0].src = eval("img" + theImageIndex);
    }
  &lt;/SCRIPT&gt;&lt;/HEAD&gt;&lt;BODY&gt;
  &lt;FORM NAME="theForm" METHOD="POST"&gt;
  &lt;TABLE&gt;&lt;TR&gt;&lt;TD&gt;Images: &lt;TD&gt;
  &lt;SELECT NAME="items" onChange="setImage(this)"&gt;
     &lt;OPTION VALUE="1"&gt;Java How-to
     &lt;OPTION VALUE="2"&gt;Javascript How-to
     &lt;OPTION VALUE="3"&gt;Powerbuilder How-to
   &lt;/SELECT&gt;
   &lt;TD&gt;&lt;IMG SRC = "../images/jht.gif" HEIGHT=100 WIDTH=200&gt;
   &lt;/TABLE&gt;&lt;/FORM&gt;&lt;/BODY&gt;&lt;/HTML&gt;
  </code></pre>
  
  <p>It's not quite what I'm trying to do though. I know php, but I don't understand javascript just yet so any help on reading this or tips on how to accomplish this would be much appreciated.</p>