title: Changing Image SRC Based on SELECT
body: <p>I have a select tag that is populated with a list of files each time the page loads. I would like the image to change to the selected file each time one is clicked in the select input. This is what I have right now, and it does not work properly. However, when it is clicked, the image and text are visible/hidden as they should be. Any help would be greatly appreciated.</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;title&gt; Table Edit The Shakespeare Studio &lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="../styles.css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;script language="javascript" type="text/javascript"&gt;
    function edit_image1()
    {
      if (document.getElementById('select1').value == "0") {
        document.preview1.style.visibility = "hidden";
        document.getElementById('random1').style.visibility = "visible";
      } else {
        var selected = document.getElementById('select1').options[document.getElementById('select1').selectedIndex].value;
        document.preview1.style.visibility = "visible";
        document.preview1.src = "../resources/uploads/"+selected;
        document.getElementById('random1').style.visibility = "hidden";
      }
    }
  &lt;/script&gt;
  &lt;div id="everything"&gt;
    &lt;form action='tableEdit.php' method='GET'&gt;
      &lt;table border='1' id='cal'&gt;
        &lt;tr id='top'&gt;&lt;td&gt; Page Name &lt;/td&gt;&lt;td&gt; Image to Use &lt;/td&gt;&lt;td&gt; Preview &lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt; about &lt;/td&gt;
          &lt;td&gt;
            &lt;select name='aboutImage' id='select1' onchange='edit_image1()';&gt;
              &lt;option value='0' selected&gt; RANDOM IMAGE&lt;/option&gt; 
              &lt;option value='IMG_6027.JPG'&gt;IMG_6027.JPG&lt;/option&gt; 
              &lt;option value='IMG_6032.JPG'&gt;IMG_6032.JPG&lt;/option&gt; 
              &lt;option value='kissme-1.jpg'&gt;kissme-1.jpg&lt;/option&gt; 
            &lt;/select&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;img name='preview1' src='../resources/uploads/0'&gt;&lt;/img&gt;
            &lt;h3 id='random1'&gt; Random &lt;/h3&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>