Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Ajax and JavaScript

Add Visual Interest to Your Web Page with JavaScript

  • Print
  • + Share This
In this chapter, you’ll learn how to make JavaScript do some cool image tricks, including making rollovers, changing images, creating ad banners, building slideshows, and displaying random images on a page.
This chapter is from the book

One of the best (and most common) uses of JavaScript is to add visual interest to Web pages by animating graphics, and that’s what this chapter is all about. Making an image on a Web page change when the user moves the mouse over the image, thereby making the page react to the user, is one of the most common—and effective—tricks you can learn in JavaScript. This rollover, as it is called, is easy to implement, yet has many applications, as you’ll see.

Rollovers are a great tool, but you can do much more than rollovers with JavaScript, such as automatically change images, create ad banners, build slideshows, and display random images on a page.

In this chapter, you’ll learn how to make JavaScript do all of these image tricks. Let’s get started.

Table 4.1. Just Enough HTML—Images





Contains the attributes that describe the image to be displayed by the browser


Contains the URL of the image, relative to the URL of the Web page


Contains the width (in pixels) at which the browser will display the image


Contains the height (in pixels) at which the browser will display the image


The width of the border to be displayed


The name that JavaScript uses to refer to this image; as with other JavaScript objects, no spaces or other punctuation is allowed, and it cannot start with a number


Used for non-visual browsers in place of the image


A horizontal buffer area around the image


A vertical buffer area around the image


Describes where this image should be placed on the page in terms of horizontal or vertical alignment


A unique identifier, which JavaScript will use to manipulate the image

Creating Rollovers

The idea behind rollovers is simple. You have two images. The first, or original image, is loaded and displayed along with the rest of the Web page by the user. When the user moves the mouse over the first image, the browser quickly swaps out the first image for the second, or replacement image, giving the illusion of movement or animation.

Script 4.1 gives you the bare-bones rollover; the whole thing is done within a standard image link. First a blue arrow is loaded (Figure 4.1), and then it is overwritten by a red arrow when the user moves the mouse over the image (Figure 4.2). The blue arrow is redrawn when the user moves the mouse away.

Script 4.1. Here’s the simplest way to do a rollover, within a link tag.

→ Transitional//EN"
        → xhtml1-transitional.dtd">
<html xmlns="">
     <title>A Simple Rollover</title>
<body bgcolor="#FFFFFF">
     <a href="next.html" onmouseover="document.arrow.src='images/arrow_on.gif'"onmouseout="document.arrow.src='images/arrow_off.gif'"><img src="images/arrow_off.gif" width="147" height="82"border="0" name="arrow" alt="arrow" /></a>
Figure 4.1

Figure 4.1 The first image, before the user moves the mouse over it.

Figure 4.2

Figure 4.2 When the mouse is over the image, the script replaces the first image with the second image.

To create a rollover:

  1. <a href="next.html"

    The link begins by specifying where the browser will go when the user clicks the image, in this case to the page next.html.

  2. onmouseover="document.arrow.src=
    → 'images/arrow_on.gif'"

    When the user moves the mouse over the image, the replacement image arrow_on.gif, which is inside the images directory, is written to the document window.

  3. onmouseout="document.arrow.src=
    → 'images/arrow_off.gif'">

    Then, when the mouse moves away, the image arrow_off.gif is swapped back in.

  4. <img src="images/arrow_off.gif"
    → width="147" height="82" border="0"
    → name="arrow" alt="arrow" />

    The image link defines the source of the original image for the page. We have included the alt attribute inside the image tag because alt attributes (which give non-graphical browsers a name or description of an image) are required if you want your HTML to be compliant with the W3C standards, and because using alt attributes helps make your page accessible to disabled users, such as visually impaired users who browse using screen readers.

  • + Share This
  • 🔖 Save To Your Account