title: Javascript onMouseover to swap images
body: <p>I have some code that makes an image larger when moused over:</p>
  
  <pre><code>&lt;script&gt;
  function bigImg(x)
  {
  x.style.height="70px";
  x.style.width="237px";
  }
  
  function normalImg(x)
  {
  x.style.height="56px";
  x.style.width="218px";
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>and I call those functions with:</p>
  
  <pre><code>&lt;a&gt;&lt;img border="0" src="category_icons/addorder.png" onmouseover="bigImg(this)" onmouseout="normalImg(this)"&gt;&lt;/a&gt;
  </code></pre>
  
  <p>But what I would really like to do is make it so the <code>bigIMG(x)</code> function also changes the image. I'm not extremely familiar with javascript and was wondering if someone knew what I can code in, to swap the image. The image name is addorder2.png. I've tried using <code>this.src="addorder2.png"; but that is not working.</code></p>