title: onmouseover, show large version of image
body: <p>I'm trying to show a large version of an image when you mouse over the smaller version of the image. I currently have 4 functions to do this, but was wondering if it could be accomplished by using one. The problem is, I'm not sure how to change the source path if I only have one function to do so. My code is below.</p>
  
  <p>HTML: (I only have the first image with the showImage() on mouse over for testing purposes)</p>
  
  <pre><code>&lt;section&gt;
          &lt;article&gt;
              &lt;header&gt;Mouse Over and Mouse Out Events&lt;/header&gt;
              &lt;img onmouseover="showImage()" onmouseout="hideImage()" id="one" src="images/small/catbread1.jpg" title="catbread1" alt="Cat with bread on face 1" /&gt; &lt;img onmouseover="bigImage2()" onmouseout="hideImage()" id="two" src="images/small/catbread2.jpg" alt="Cat with bread on face 2" /&gt;
              &lt;img onmouseover="bigImage3()" onmouseout="hideImage()" id="three" src="images/small/catbread3.jpg" alt="Cat with bread on face 3" /&gt; &lt;img onmouseover="bigImage4()" onmouseout="hideImage()" id="four" src="images/small/catbread4.jpg" alt="Cat with bread on face 4" /&gt;
          &lt;/article&gt;
          &lt;article&gt;
              &lt;header&gt;Cat Photos&lt;/header&gt;
              &lt;img id="full" src="" /&gt;
          &lt;/article&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>function hideImage() {
      document.getElementById("full").src = "";
  }
  
  function bigImage1() {
      document.getElementById("full").src = "images/large/catbread1.jpg";
  }
  
  function bigImage2() {
      document.getElementById("full").src = "images/large/catbread2.jpg";
  }
  
  function bigImage3() {
      document.getElementById("full").src = "images/large/catbread3.jpg";
  }
  
  function bigImage4() {
      document.getElementById("full").src = "images/large/catbread4.jpg";
  }
  
  function showImage() {
      document.getElementById("full").src = "images/large/" + this.title + ".jpg";
  }
  </code></pre>