The term image rollover refers to the technique of changing an image display on a web page when the end-user mouses over a picture or image embedded on a web page. When you program a web page to contain a rollover image, two pictures are commonly used for the effect. One of the images is displayed when the web page is loaded in the user's web browser, and the second image is displayed when the mouse is positioned over the image. The JavaScript method “onMouseOver” is invoked when the mouse is positioned over the picture and the method “onMouseOut” when the cursor leaves the surface area of the image. The methods can be invoked via the attributes of the <a> tag or defined in the <head> tag of the web page. The following exampled demonstrates how to create image rollovers in the <a> tag of a web page.

How to Make Image Rollovers

Step 1 – Open the web page that you intend to add an image rollover effect on in your HTML autoring program or in a text editor to an existing web page.

Step 2– Enter the following code to embed a hyper linked image on the web page:

<a href=”http://www.mywebpagelink.com”><IMG src=”http://www.mywebpage.com/image1.jpg”></a>

This code will include an image hyperlinked to a link of your choice on the page.

Step 3 – Enter the following attribute inside of the “<A>” HTML tag in order to define the image to display when the mouse is rolled ontop of the displayed image:

ONMOUSEOVER='rollover.src=”http://www.mywebpage.com/imagenew.jpg” '

This code will display the new image when the user mouses over the displayed image on the webpage.

Step 4 – Enter the following attribute after the ONMOUSEOVER attribute entry to define the image to display when the mouse cursor leaves the display area of the image on the web page:

ONMOUSEOUT='rollover.src=”http://www.mywebpage.com/image1.jpg” '

Step 5 – Verify that the rollover image code appears similar to the following code. Realize that the hyper link and image links should be modified to match code to live images and links on your webpage:

<a href=”http://www.mywebpagelink.com” ONMOUSEOVER=‘rollover.src=“http://www.mywebpage.com/imagenew.jpg” ’ ONMOUSEOUT=‘rollover.src=“http://www.mywebpage.com/image1.jpg” ’><IMG src=”http://www.mywebpage.com/image1.jpg”></a>

Step 6 – Save and view the web page in your web browser to confirm the image rollover has the desired effect.

Note that if you use an integrated development environment to author web pages, that you may have automated functions available to create image rollovers on web pages. The above instructions can be used to manually create image rollovers directly in the HTML text of a web page.