title: Changing IMG SRC with Javascript
body: <p>I'm new at javascript and while there are many more complex solutions, I don't understand them and hope I don't have to at this point.</p>
  
  <p>I have a main picture...</p>
  
  <pre><code>&lt;img src="main-picture.jpg" name="Mainpic" id="image"&gt;
  </code></pre>
  
  <p>...and I want to be able to change this picture when I click on one of two thumbnails.</p>
  
  <pre><code>&lt;a href="" onclick="FirstPic()"&gt;&lt;img src="replacement1.jpg" name="pic1"&gt;&lt;/a&gt;
  &lt;a href="" onclick="SecPic()"&gt;&lt;img src="replacement2.jpg" name="pic2"&gt;&lt;/a&gt;
  </code></pre>
  
  <p>My javascript code I thought would be super easy.  I'm currently using...</p>
  
  <pre><code>function FirstPic(){
          document.Mainpic.src = document.pic1.src
          return
      }
  
  function SecPic(){
          document.Mainpic.src = document.pic2.src
          return
      }
  </code></pre>
  
  <p>Now the variable <strong>is</strong> changing however it's not <strong>staying</strong> changed.  When the thumbnail is clicked on, the replacement picture flashes on the screen and then it returns to the original main-picture.jpg.</p>
  
  <p>How do I make the change permanent until a different thumbnail is clicked?</p>
  
  <p>Thanks!</p>