title: Onmouseclick change another image
body: <p>I have three images: the first is a light switch, the second is an "off" light bulb and the third is an "on" light bulb. When a user clicks on the light switch image, I would like it to change the "off" light bulb image into the "on" light bulb image. Is this possible? </p>
  
  <p>These are the images:</p>
  
  <p><img src="https://i.stack.imgur.com/wLSuu.gif" alt="switch">  <img src="https://i.stack.imgur.com/l9EOR.gif" alt="off light bulb"> <img src="https://i.stack.imgur.com/TnKyp.gif" alt="on light bulb"></p>
  
  <p>Javascript:</p>
  
  <pre><code>img2=new Image();
  img2.src="images/RCS/lightbul2-250.gif";
  img3=new Image();
  img3.src="images/RCS/lightbuld1.gif";
  
  function changeImage() {
      document.getElementById('myImage').src=img2.src;
  }
  function changeImage2() {
  document.getElementById('myImage').src=img3.src;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;img id="myImage" onmouseover="changeImage()" onmouseout="changeImage2()" border="0" width="250" height="141" src="images/RCS/lightbulb1-100.gif"&gt;
  </code></pre>