///The Mouseover / Rollover Effect

The Mouseover / Rollover Effect

The Mouseover / Rollover Effect

This is what you often see on various web sites – when you hover your cursor over an image, it metamorphoses into some other image. For instance, a simple two-dimensional button changing into three-dimensional with shadow underneath. We generally have such buttons in a navigation bar, and we have learnt how to use a common navigation bar using the Server Side Inculdes.

What we want to do here is, change the look of the image when we take the cursor on that image. Before we proceed, using your favorite image editor, prepare two images of identical dimensions – we are going to use them here. You already know that you can insert an image in a web page by using:

<img src="your_image.gif">

And with a link,

<a href="mylink.html"><img src="your_image.gif"></a>

We want your_image.gif to change into something else when we take the cursor to the link mylink.html.

As mentioned above, make two images of same dimensions, and name them as image_in.gif and image_out.gif. Here, image_out.gif should be the normal link, without the cursor on it, and image_in.gif should be the image you want to display when the cursor is hovering over the link, that is, when the cursor takes the shape of a hand with a pointing finger.

Having images made, let us see how the JavaScript looks:

<script language="Javascript1.2">

function rollover(ImageIndex,ImgName)

document.images[ImageIndex].src = ImgName;



and the HTML code that uses this JavaScript to render the rollover effect:

<a href=link1 onMouseOver=rollover(n,’in1.jpg’); onMouseOut=rollover(n,’out1.jpg’)> <img src=out1.jpg></a>

The tags onMouseOver and onMouseOut invoke the function rollover(), where "n" is the index number of the image you want changed.

But how do we find the index number of a particular image? Well, either write an intricate JavaScript for it, or do it manually. Since anyway I don’t use many images on my web pages, using a JavaScript seems a tad overkill. So a good way is, insert all the images you want to insert, save the page and load it on your browser. The index number is any number between zero and the number of images you have on your page, so you can keep changing and refreshing the page to arrive at the correct number.

Remember the array form.elements[ ]? In a similar fashion, we can access individual images present on a web page by their individual index number. In the onMouseOver attribute, we sent the index place (number) and the new image that should replace the old existing one.

Then see the function rollover(), that gets two parameters, namely ImageIndex and ImgName.

The line

document.images[ImageIndex].src = ImgName;

does the actual trick. It changes the source [src] of that image that is at the position ImageIndex to ImgName.

Another shorter way to do rollovers is the one I recently learnt, and am using everywhere. It does not require a separate JavaScript, and in fact, I would recommend this:

<a href=link onMouseOver="ImageName.src=’image_on’" onMouseOut="ImageName.src=’image_off’"><img src=image_off name=ImageName />

where image_on and image_off are self-explanatory.

2010-05-26T10:59:37+00:00 June 1st, 2005|JavaScript|0 Comments

About the Author:

Amrit Hallan is a freelance web developer. You can checkout his website at http://www.bytesworth.com. For more such articles join BYTESWORTH REACHOUT at http://www.bytesworth.com/br/default.asp or if you have a web dev related question then post it at http://www.business180.com/index.php

Leave A Comment