Question

I was watching a Video tutorial according to the author CODE #2 should be used, but instead I changed it a little bit to CODE #1
So whats the difference in both of codes ,both perform the same tasks ,any technical or good practice here ?

CODE #1:
Used eventhandlers MouseOver and MouseOutof of tag

<a href="http://www.google.com" > 
    <img alt="arrow" name="ArrowImage" 
         onmouseover="document.ArrowImage.src='Images/arrow_on.gif'"
         onmouseout="document.ArrowImage.src='Images/arrow_off.gif'"
         src="Images/arrow_off.gif" />
</a>

CODE #2:
Used eventhandlers MouseOver and MouseOut of tag

<a href="http://www.google.com" 
   onmouseover="document.arrow.src='images/arrow_on.gif'"
   onmouseout="document.arrow.src='images/arrow_off.gif'">
     <img src="images/arrow_off.gif" width="147" height="82" 
          name="arrow" alt="arrow" />
</a>

Answer 1

In the first example, the onmouseover and onmouseout events are bound to the <img> tag, so mousing inside the <img> activates them. In the second example, they’re bound to the <a> tag in which the <img> is contained.

For your two examples, the result will be identical because the <img> is the only element inside the <a> tag.

However, if more text was included inside the <a> tag and the events bound to the <img> only, the rollover effect wouldn’t occur when mousing over the text.

For example:

<a href="http://www.google.com" > 
    This is some text explaining the image. If you mouse over it, the rollover won't change.
    <img alt="arrow" name="ArrowImage" 
         onmouseover="document.ArrowImage.src='Images/arrow_on.gif'"
         onmouseout="document.ArrowImage.src='Images/arrow_off.gif'"
         src="Images/arrow_off.gif" />
</a>

<a href="http://www.google.com" 
   onmouseover="document.arrow.src='images/arrow_on.gif'"
   onmouseout="document.arrow.src='images/arrow_off.gif'">
     This is some text explaining the image. If you mouse over it, the rollover WILL change.
     <img src="images/arrow_off.gif" width="147" height="82" 
          name="arrow" alt="arrow" />
</a>