title: javascript change image when onmouseover and onmouseout
body: <p>I am a beginner and I am doing a homework and I have a small problem. My task is when onmouseover is on, image1 should be changed to image2. When onmouseout is on, image2 should be changed to image1 
  Onmouseover works but onmouseout does not work! 
  Here is my code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;DOM_4&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;img onmouseover = "changePic1()"onmouseout= "changePic2()" id="myImg"           src="bakground.jpg" width="150" height="200"&gt;
  
  &lt;script&gt;
  function changePic1() {
  document.getElementById("myImg").src = "screen.jpg";
     }
    function changePic22(){
     document.getElementByID("myImg").src = "bakground.jpg";
     }
   &lt;/script&gt;
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Why my onmouseout does not work? I know there can be better ways to code, but I must use both onmouseover and onmouseout. There should be only HTML and simple javascript codes. (My teacher said so) </p>