title: this.style.cursor='hand', not working for the first time when I hover mouse on to the element
body: <p>I am new to programming. All I was trying is to change the style of cursor to hand <strong>onmouseover</strong> event. when I run the page for first time it is changing the border style but the cursor style is not being changed, but when I move the cursor onto the image element for the second time everything is working as expected. 
  can anyone please explain what's the exact reason for this improper behavior and how can I make it work. </p>
  
  <p><strong>NOTE:</strong><br>
  I was trying to implement this in asp.net content pages :P so I feel this is easier way instead of maintaining a separate css file</p>
  
  <pre><code>&lt;img alt="Sedan" width="300px" height="200px" id="img" src="Images/WelcomePage/Compact/abc.jpg" /&gt;
  
  
  &lt;script&gt;
      img.onmouseover = function () {
          this.style.cursor = 'hand';
          this.style.border = "2px solid black"
      }
      img.onmouseout = function () {
          this.style.cursor = 'pointer';
          this.style.border = "2px solid white"
      }
  &lt;/script&gt;
  </code></pre>