title: Javascript onclick with onmouseover and onmouseout
body: <p>I have an image with a few javascript calls on it, most of which work OK.</p>
  
  <p>Basically, what I want it to do, is when clicked swap image and then depending on which image it is currently on, to swap on mouseover too.</p>
  
  <p>Here's my HTML:</p>
  
  <pre><code>&lt;a href="#show" class="show_hide"&gt;
  &lt;img src="&lt;?php echo WEB_URL; ?&gt;/images/show-more-arrow.jpg" width="61" height="45" id="clicktoggleimage" onclick="changeImage()" onMouseOver="checkMouseOver()" onMouseOut="checkMouseOut()" /&gt;&lt;/a&gt;
  </code></pre>
  
  <p>And my Javascript:</p>
  
  <pre><code>function changeImage() {
      if (document.getElementById("clicktoggleimage").src == "http://www.pete.com/images/show-less-arrow.jpg") {
          document.getElementById("clicktoggleimage").src = "http://www.pete.com/images/show-more-arrow.jpg";
      } else {
          document.getElementById("clicktoggleimage").src = "http://www.pete.com/images/show-less-arrow.jpg";
      }
  }
  
  function checkMouseOver() {
      if (document.getElementById("clicktoggleimage").src == "http://www.pete.com/images/show-less-arrow.jpg") {
          document.getElementById("clicktoggleimage").src = "http://www.pete.com/images/show-less-arrow-over.jpg";
      } else if (document.getElementById("clicktoggleimage").src == "http://www.pete.com/images/show-more-arrow.jpg") {
          document.getElementById("clicktoggleimage").src = "http://www.pete.com/images/show-more-arrow-over.jpg";    
      }
  }
  
  function checkMouseOut() {
      if (document.getElementById("clicktoggleimage").src == "http://www.pete.com/images/show-less-arrow-over.jpg") {
          document.getElementById("clicktoggleimage").src = "http://www.pete.com/images/show-less-arrow.jpg";
      } else if (document.getElementById("clicktoggleimage").src == "http://www.pete.com/images/show-more-arrow-over.jpg") {
          document.getElementById("clicktoggleimage").src = "http://www.pete.com/images/show-more-arrow.jpg"; 
      }
  }
  </code></pre>
  
  <p>This works fine, except when the button is clicked for the second time, the image doesn't revert back to the show-less-arrow.jpg</p>
  
  <p>Many thanks for your help</p>