The Best User
Windows Technology Resource

    Homepage | MSUN | BGFN | Contact | Site Map
  Become a Partner 
  Contact Us 
Rollover Links with Javascript

An image rollover is basically two different images. One is displayed after the page loaded up, the other one is displayed only when the user moves his mouse over the first one. Image rollovers are often used for a site's interface. Currently this is the most popular JavaScript function.

The following script listening shows you how create your own.

Image Rollover Examples:

<title>JavaScript Image Rollovers</title></head>
  <a href="link.htm"

   <img src="outImage.gif" name="image1">


Quick links to Microsoft Sites

Useful Internal Links


Windows XP Related Resources
  1. Windows Messenger Experience Kit
  2. Windows XP Expert Zone Community
  3. Real-Time Collaboration Using Office XP and Windows XP
  4. Explore Windows Messenger:
    How-to Articles, Offers, and More

This is the easiest rollover there is. onMouseOver="document.image1.src='onImage.gif'" replaces "outImage.gif" with "onImage.gif". onMouseOut="document.image1.src='outImage.gif'" swapps "outImage.gif" back when the user moves his mouse away from it.

The image tag defines the source of the original image and contains the very important "name" option (name="image1").

The disadvantages of this kind of rollover are, that although it is simple, it produces an error message in older browsers, such as Netscape 2.0, Internet Explorer 3.0 and earlier and America Online 2.7 browser. Also, because the second image is downloaded from the server at the same time, there can be a delay when the user rolls over the first image, before it's replaced with the second.

Rather than using the first method, we suggest you take a look on the next script and use this one.

  Image Rollover Example:

<title>JavaScript Image Rollovers</title>
<!-- Hide Script
	function move_in(img_name,img_src) {

	function move_out(img_name,img_src) {
//End Hide Script-->
  <a href="link.htm"

  <img src="image_out.gif"
   alt="Move your mouse over here!" name="image1">


We define two functions, "move_in" and "move_out". Inside those we set the parameters img_name (image name) and img_src (image source) to be able later to identify the image and its rollover.


Below is a working demo. When you click a link, not only the image changes, but you are taken to another page:


Next we have to give our image a name (name="image1") in order to be able a apply an rollover to it. To complete the rollover we use onMouseOver, to call the function "move_in", which includes the source for the rollover image, and onMouseOut, to call the function "move_out", which includes the information for the initial image and kind of resets the situation, when you move your mouse away from the image.

    2003 Zarax Online, an official partner of the Microsoft User Network.