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="" > 
    <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="" 
   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>

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." > 
    <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." 
   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>

• javascript
• html

• 2 Inline JavaScript is generally bad practice isn't it? – KTastrophy Commented Feb 13, 2012 at 18:14
• @KThompson you are right but i'm in the learning stage :) – DayTimeCoder Commented Feb 13, 2012 at 18:19
• 1 Why not use this.src in CODE# 1. It would increase the readability of the code.... – Naveed Butt Commented Feb 13, 2012 at 18:21
• @KThompson What do you suggest ? I should make a javascript RollOver() method and make an external .js file – DayTimeCoder Commented Feb 13, 2012 at 18:21
• @Owais Qureshi - See my answer – KTastrophy Commented Feb 13, 2012 at 18:36

6 Answers 6

If there's no formatting or additional content inside <a>, you can use either and it won't make a difference.

If there is CSS formatting or additional content within the link, the boundary of the <a> might differ from the boundary of the img. In this case it depends on the actual intent: Do you want to change the image source only when hovering the image or also when hovering the remainder of the link.

But since you're asking for good practice: It is remended to not use inline JavaScript, i.e. don't mix HTML and JavaScript. When applying good practice you'd probably catch the mouse events in a separate <script> at the bottom of your HTML document or define a style using the CSS :hover pseudo class.

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." > 
    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." 
   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>

Either works fine. It's a matter of what you want to do.

If for instance you had text as well, you'd choose option 2, because the text would be right after <img> and before </a>.

Generally, you want stay away from binding directly to images, because you usually end up wanting to put more things with that image (such as text, or other containers).

It's generally not considered good practice to use 'inline javascript' the way you're doing here. This makes code very difficult to read and and less maintainable in the long run. Using unobtrusive javascript defined in a separate javascript file is the way to go. An example of that using jquery would be:

// defined in application.js for example:

$("img").hover(function onmouseover(){
    $(this).attr("src", "Images/arrow_on.gif");
}, function onomouseout(){
    $(this).attr("src", "Images/arrow_off.gif");
});

As far as the differences between the two approaches, the only difference is at what point the events get triggered. The first one causes the events to be triggered when the user mouses over the image, and the second one occurs when the user mouses over the anchor. The anchor, depending on it styles, could occupy a larger area than the image itself, so choosing between the two depends on the effect you want to produce.

As far as 'good practices', this example is really a bad usage of javascript, in other words you can acplish the same thing using CSS Sprites.

For example, CSS:

/* use a more specific selector in your actual code */
a {
  /* on state */
  background: url(Images/arrow.gif) no-repeat 0 0;
}
a:hover {
  /* default state */
  background: url(Images/arrow.gif) no-repeat -50px 0;
}

Was the video from 1992?

You can achieve rollover effects with CSS alone, which is considerably better, e.g.

a#rollover {
   background: url("normal.jpg") no-repeat 0 0;
}

a#rollover:hover {
   background: url("rollover.jpg") no-repeat 0 0;
}

Better still, you can have both states as a single image, and just change the background position on hover, as described here.

If you want to use JavaScript to change an image source, then a) use unobtrusive JavaScript, and b) use jQuery for added simplicity.

First, roll over images are typically acplished with CSS

See devdigital's answer for an example.

Second, if you are going to use JavaScript in the way you have in your code see Michael's example

Third, I would like to note that the attribute "name" is not a valid attribute for either of those elements in HTML5 and not at all (Read: HTML4) for the img element.

Finally, a preferred way to do this with with JS would be something like this:

HTML:

<a id="rollover" href="link.html"><img id="rolloverimage" src="image.jpg" width="100" height="100" alt="text"/></a>

JS:

var atag =  document.getElementById('rollover');

atag.onmouseover = function() {
    document.getElementById('rolloverimage').src = 'rollover.jpg';
}

atag.onmouseout = function() {
    document.getElementById('rolloverimage').src = 'image.jpg';
}