title: How to change image with onmouseover in different place that reverts back to default image on the site?
body: <p>I'm no expert in this so excuse me if this is very basic but I couldn't find answers.</p>
  
  <p>So I want to have navigation section with categories on the left side of the page.
  Each category is different site, and each site has it's own unique image on it.
  ex. category1.htm has defaultpic1.jpg, category 2.htm has defaultpic2.jpg, ....</p>
  
  <p>When I hover on link to category2 in the nav sections I want them to change default image on current site to default image on category2, and then onmouseout I want it to go back to the default one.</p>
  
  <p>Also note my images have different dimensions, different height values.</p>
  
  <p>Basically I know I can change the defaultpic source on every page but I want to use the same script which will always know were to look for the default path and just use it, without the need to change the line in every single category.</p>
  
  <p>Sorry if I'm not very clear on that but I try my best.</p>
  
  <p>I have this (removed everything else so I just paste what I need help with):</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript"&gt;
            function mouseOverImage2()
  {
      document.getElementById("catPic").src='images/defaultpic2.jpg'; document.images['catPic'].style.width='280px'; document.images['catPic'].style.height='420px';;
  }  function mouseOverImage3()
  {
      document.getElementById("catPic").src='images/defaultpic3.jpg'; document.images['catPic'].style.width='280px'; document.images['catPic'].style.height='266px';;
  }
  function mouseOutImage()
  {
      document.getElementById("catPic").src='???'; //here's what I don't know what to put
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="nav"&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href="subcategory2.htm" onmouseover="mouseOverImage2()"
      onmouseout="mouseOutImage()"&gt;Subcategory One&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="subcategory3.htm" onmouseover="mouseOverImage3()"
      onmouseout="mouseOutImage()"&gt;Subcategory 2&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;
  &lt;/div&gt;
  &lt;div&gt;
                &lt;img id="catPic" src="images/defaultpic1.jpg" width="280" height="420" alt=""&gt;
              &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>