CMPS 335 Advanced Web Publishing JavaScript Programming


Dynamic Graphics - Rollovers and Cycling Banners

Rollovers

Animating graphics adds excitement to Web pages.  One of the most common uses of JavaScript is to create dynamic iamges such as rollovers.  A rollover is an image that changes when the viewer moves the mourse over it.  Rollover technique employs the onMouseOver and onMouseOut event handlers and the src property of the image object.

Creating A Simple Rollover

Two images are used in creating a rollover.  The first image is loaded and displayed, along with the rest of the page, using the <IMG> tag.  When the mouse is moved over the image, the onMouseOver event handler responds to the mouseOver event and swaps out the first image for the second image.  When the mouse is moved out of the second image, the onMouseOut event handler redisplays the first image.  Most browsers do not support the <IMG> for the mouseOver and mouseOut events.  Therefore, the onMouseOver and onMouseOut event handlers must be placed in the <A> tag as attributes.  The IMG tag that displays the first image must include the NAME attribute, which is used to identify the image object in script.

An example of simple rollover
  
Moving the mouse pointer over on this image will change this image to another image

(Source Code)
<a href="#"
 onMouseOver="document.ROVER.src='cat.jpg';"
 onMouseOut="document.ROVER.src='roses.jpg';">
 <img name="ROVER" src="roses.jpg" width=80
 height=70 border=0 align=left>
</a>

>Moving the mouse pointer over on this image will change this image to another image   The href attribute of the link tag is set to "#" so that nothing happens if the user clicks the clickable image.  The href attribute can also bet set to the URL of any Web page.  The NAME attribute in the IMG tag creates an image object.  The BORDER attribute is set to 0 to prevent the link color from appearing around the border of the image.

Creating A More Effective Rollover

The above rollover technique has a disadvantage.  It may produce a few seconds of delay for the second image to appear on the screen when the mouse pointer is moved over the first image.  A more effective rollover is to preload the images before any mouseover event occurs as shown in the following code: 

    <script language=JavaScript>
    var outImage = new Image;
    var overImage = new Image;
    outImage.src = "cat2a.jpg";
    overImage.src = "cat2b.jpg";

    function rollover(p) {
      document[p].src = overImage.src;
    }
    function rollout(p) {
      document[p].src = outImage.src;
    }
    </script>
The document object contains an array of all objects on the page and the IMG cat2 is one such object. The expression document["cat2"] represents the IMG object.  Since cat2 is stored in a variable p, the expression document[p] properly references the IMG cat2 object.  The above script is placed in the <head> section.  The following script, placed in the <body> section, invokes the functions. 

    <a href="cat2.html" onMouseOver="rollover('cat2');"
       onMouseOut="rollout('cat2');">
    <img src="cat2a.jpg" width=100 height=100 name="cat2" border=0
       hspace=30 align=left></a>
Exmple 2. A more effective rollover



Move the mouse over to the image


Cycling Banners

We can create banners that periodically switch between images.  Most of these cycling banners are animated GIF files that contain frames of images displayed in rapid succession.  The following code uses three regular GIF images and cycles repeatedly through them.
 
    <head><'title>Cycling Banners</title>
    <script language="JavaScript">
    imageArray = new Array ("welcome1.gif","welcome2.gif","welcome3.gif");
    imageIndex = 0;
    arraySize = imageArray.length;

    function cycling() {
      if (document.images) {
        imageIndex = imageIndex + 1;
        if (imageIndex == arraySize) {
           imageIndex = 0;
        }
      document.welcomes.src=imageArray[imageIndex];
      setTimeout("cycling()", 1500);
      }
    }
    </script>
    </head>
    <body onLoad="cycling();">
    <br><img  src="welcome1.gif" name="welcomes">
    ...
Click HERE for an example of cycling banners

Return to CMPS 335 Main Page
Return to Web Site Home Page