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.

Click here to see how the rollover works

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 src="moveup.gif" width="143" height="39" border="0" 
alt="Move your mouse over me" 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="somewhere.html">
<img src="moveup.gif" width="143" height="39" border="0" 
alt="Move your mouse over me" name="sub_but" />
</a>

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

<a href="somewhere.html"
onmouseover="document.sub_but.src='movedown.gif'"
onmouseout="document.sub_but.src='moveup.gif'">

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

</a>

Remember that the image object is a part of the document object and its src property refers to the file name of the image being displayed.
onmouseover specifies that the source (src) of sub_but (the name of our image) should change to movedown.gif when the mouse cursor is moved over the image. When the mouse cursor is moved off the image, its source should be changed back to moveup.gif.
You’ll note that the JavaScript code is written right inside the anchor tags. This is fine for one or two image rollovers. However, if you plan for several image rollovers on a page, it is advisable to place this JavaScript code into functions.
Let’s see how this is done.