Creating a Rollover

A rollover is a visual effect in a Web browser page in which passing the mouse pointer over an area in the page causes another area to visually change. A good example is a Web site that sells clothing. This site could allow you to see how a garment looks using different fabric—you would see the different fabric patterns in the garment when you pass the mouse pointer over a color swatch. In fact, you’ll find rollovers in use on a great many industrial-class commercial Web sites.

Try This at Home

You can use nested rollovers fairly easily to create menus that expand when the mouse pointer rolls over a top-level menu. Why don’t you try to do so? Implementing an expanding menu using rollovers is a great exercise.

The Image Object Event Model

Creating a rollover involves the simple use of the properties and events of the HTML Image object. To some degree, Image objects function like any other HTML element in a Web page, and they’re manipulated using JavaScript in the same way. But there are some properties and events that only apply to image elements.

Images placed in an HTML document using the HTML <IMG> tag correspond to JavaScript Image objects. Each graphic, represented by an <IMG> tag, is referenced as a JavaScript object. The Image object can be referred to by its name or as a member of the images array of the document object. The images array of the document object stores an Image object for each image that’s placed on an HTML page using an <IMG> tag.

It probably goes without saying that the major impact an image has on an HTML page isn’t an issue of JavaScript, or HTML, but rather a matter of the graphic itself. As you probably know, the bulk of static graphics displayed on the Web are saved as GIF (.gif) or JPEG (.jpg or .jpeg) files.

Each JavaScript Image object is a child of the document object. Image properties are referenced hierarchically, using the name of the image or the image’s position in the images array. For example, the following:


is the first image in the images array for a given document, and the following:


is an <IMG> element with its name attribute set to equal theImage.

Images have some properties, in addition to name, that are useful in creating visual effects. As is usual with HTML elements, these JavaScript properties correspond to HTML attributes.

First, an Image object’s src property sets (or reads) the URL of the graphic file that’s to be displayed. Most JavaScript image manipulation routines use the src property as the main mechanism for creating visual special effects such as animations (for an example, see the slide show application later in this chapter).

Second, you can use the width and height properties of the Image object to dynamically generate effects having to do with the size of an image.

Image controls support the standard HTML element mouse events, which are shown again in case you don’t remember them in Table 11-1. (Events were explained in Chapter 8, “ Understanding Events and EventDriven Programming.”)

Table 11-1: Standard HTML Element (Including Image Object) Mouse Events




When a user clicks on an element. A click event doesn’t occur unless an onMouseDown is followed by an onMouseUp over the same element. In other words, onClick isn’t the same as onMouseDown.


When a user presses the mouse button while the mouse pointer is over an element.


When a user moves the mouse within an element.


When the mouse is moved out of an element.


When the mouse is moved over an element.


When a mouse button is released while the mouse pointer is over an element.

You can place your code in any of these event handlers. It’s important that you distinguish between the different mouse events so that your JavaScript programs function as they’re intended.

Table 11-2 shows some events that are specific to the Image object.

Table 11-2: Image Objects Events




If a user cancels the download of an image


If an error occurs when downloading an image


When an image finishes loading successfully


As I’ve already explained, a rollover is a commonly used and easy-toachieve effect in which passing the mouse over one image causes a change in another image. For example, suppose you want to show your Web page audience an easy chair upholstered in the fabric selected by the user or, as in the sample project, a butterfly in the pattern the user selects. You’ve always wanted to dress a butterfly, haven’t you?

This project shows you how to use a rollover to “try on” different patterns for a butterfly.

To Create a Rollover:

  1. Create nine image files to be used in the rollover. In the example, these are named as shown in Table 11-3 and can be downloaded from the Apress Web site.

    Table 11-3: Graphics Files Used in the Rollover Example




    Blank butterfly image that will be filled with patterns





    Swatch files that represent possible patterns





    Butterfly filled with the designated pattern

  2. Place an <IMG> tag at the beginning of the <BODY> section of an HTML page. This tag will use its src attribute to reference the blank image of a butterfly that’s to be filled with patterns:

     <IMG src="/books/2/230/1/html/2/white.gif" height=100 width=175 border=0> 

  3. For each of the four patterns that will be used to fill the butterfly, create an <IMG> tag that loads the swatch file as the value of the src attribute:

     <IMG src="/books/2/230/1/html/2/bubble1-swatch.gif" height=75 width=75 border=2> 

  4. For each of the four <IMG> tags that represents a pattern, add an onMouseOver event handler that loads the graphic file containing the butterfly filled with the pattern into the first <IMG> tag on the page when the mouse passes over the pattern:

     <IMG src="/books/2/230/1/html/2/bubble1-swatch.gif" height=75 width=75 border=2     onMouseOver="document.images[0].src='/books/2/230/1/html/2/bubble1.gif'";> 

    This code assigns the file bubble1.gif to the src property of the first image on the page, designating it as the zero element of the images array.

  5. For each of the four <IMG> tags, add an onMouseOut event handler that returns the original blank butterfly to the first image when the mouse leaves the pattern swatch:

     <IMG src="/books/2/230/1/html/2/bubble1-swatch.gif" height=75 width=75 border=2     onMouseOver="document.images[0].src='/books/2/230/1/html/2/bubble1.gif'";     onMouseOut="document.images[0].src='/books/2/230/1/html/2/white.gif';"> 

  6. Save the page (Listing 11-2 shows the complete source code).

    Listing 11.2: Creating a Rollover Effect

    start example
     <HTML> <HEAD> <TITLE>Visualize Your Butterfly!</TITLE> </HEAD> <BODY> <H1>     Visualize Your Butterfly!     </H1> <H2>     Pass your mouse over a pattern to see the butterfly wearing it!     </H2> <TABLE cellpadding=5 cellspacing=10> <TR> <TD> <IMG src="/books/2/230/1/html/2/white.gif" height=100 width=175 border=0> </TD> <TD> <IMG src="/books/2/230/1/html/2/bubble1-swatch.gif" height=75 width=75 border=2        onMouseOver="document.images[0].src='/books/2/230/1/html/2/bubble1.gif'";        onMouseOut="document.images[0].src='/books/2/230/1/html/2/white.gif';"> </TD> <TD> <IMG src="/books/2/230/1/html/2/bubble2-swatch.gif" height=75 width=75 border=2        onMouseOver="document.images[0].src='/books/2/230/1/html/2/bubble2.gif';"        onMouseOut="document.images[0].src='/books/2/230/1/html/2/white.gif';"> </TD> <TD> <IMG src="/books/2/230/1/html/2/check1-swatch.gif" height=75 width=75 border=2        onMouseOver="document.images[0].src='/books/2/230/1/html/2/check1.gif';"        onMouseOut="document.images[0].src='/books/2/230/1/html/2/white.gif';"> </TD> <TD> <IMG src="/books/2/230/1/html/2/check2-swatch.gif" height=75 width=75 border=2        onMouseOver="document.images[0].src='/books/2/230/1/html/2/check2.gif';"     onMouseOut="document.images[0].src='/books/2/230/1/html/2/white.gif';"> </TD> </TR> </TABLE> </BODY> </HTML> 
    end example

  7. Open it in a browser. As shown in Figure 11-5, the butterfly is patternless.

    click to expand
    Figure 11-5: The butterfly has no pattern.

  8. Pass your mouse over a pattern swatch. The butterfly will be “filled in” with the pattern (see Figure 11-6).

    click to expand
    Figure 11-6: The butterfly is “filled in” with the first pattern.

  9. Move the mouse to another pattern. The butterfly will “fill in” with that pattern (see Figure 11-7).

    click to expand
    Figure 11-7: The butterfly is now “dressed” using the plaid pattern.


As I’ve noted several times, it’s obviously true that the visual benefit of the rollover effect depends more on the quality of the graphics used than on programming skill.


There’s nothing to stop you from creating a rollover that changes the graphic rolled over (or clicked) rather than another graphic. This could be called an auto-rollover.

Learn How to Program Using Any Web Browser
Learn How to Program Using Any Web Browser
ISBN: 1590591135
EAN: 2147483647
Year: 2006
Pages: 115
Authors: Harold Davis

Similar book on Amazon © 2008-2017.
If you may any questions please contact us: