Javascript image rollover

JavaScript image rollovers
JavaScript image rollovers have been one of the most used features for bringing interactivity to web pages. They refer to the change in the image when the mouse cursor is moved over and subsequently off the image.

Rollovers employ two JavaScript event handlers. onmouseover, that captures the action when the mouse cursor is brought over an image and onmouseout, that detects the action when the mouse cursor is moved off an image. These two even handlers are placed inside the anchor tag that surrounds the IMG tag.

We also use the src property of the JavaScript image object. This property refers to the file name of the image being displayed (image source). Finally, we employ the NAME attribute of the HTML IMG tag to explicitly refer to the image in question.
The logic is extremely simple. It's a matter of changing the image when the mouse cursor is placed over it and then changing it back to the original when the mouse cursor moves off the image.
Let's construct our image tag:


<img height="39" alt="Move your mouse over me" src="http://www.blogger.com/moveup.gif" width="143" border="0" name="sub_but" />

Note: We use the NAME attribute of the HTML IMG tag to give the name sub_but to our image. JavaScript event handlers will refer to the image with this name.You'll notice that the image source (file name) is moveup.gif, which is the image to be displayed when the mouse cursor is off the image.
Now, we place anchor tags around this image:

<a href="http://www.blogger.com/somewhere.html">
<img height="39" alt="Move your mouse over me" src="http://www.blogger.com/moveup.gif" width="143" border="0" name="sub_but" />
</a>

Lastly, we include the two JavaScript event handlers inside this anchor tag.

<a onmouseover="document.sub_but.src='movedown.gif'" onmouseout="document.sub_but.src='moveup.gif'" href="http://www.blogger.com/somewhere.html">
<img height="39" alt="Move your mouse over me" src="http://www.blogger.com/moveup.gif" width="143" border="0" name="sub_but" />
</a>