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

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

Working with Images in JavaScript

  • Print
  • + Share This
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 from JavaScript: Visual QuickStart Guide, 9th Edition, you’ll learn how to make JavaScript do all of these image tricks.
This chapter is from the book

One of the best (and most common) uses of JavaScript is to add visual interest to webpages by animating graphics, and that’s what this chapter is all about. Making an image on a webpage 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

Tag

Attribute

Meaning

img

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

src

Contains the URL of the image, relative to the URL of the webpage

width

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

height

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

alt

Used for non-visual browsers in place of 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 webpage 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.

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

04fig01.jpg

Click to view larger image

circle_a.jpg The first image, before the user moves the mouse over it.

04fig02.jpg

Click to view larger image

circle_b.jpg When the mouse is over the image, the script replaces the first image with the second image.

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

<!DOCTYPE html>
<html>
<head>
     <title>A Simple Rollover</title>
     <link rel="stylesheet" href="script01.css">
</head>
<body>
     <a href="next.html" onmouseover="document.images['arrow'].src='images/arrow_on.gif'" onmouseout="document.images['arrow'].src='images/arrow_off.gif'"><img src="images/arrow_off.gif" id="arrow" alt="arrow"></a>
</body>
</html>

Some styles get applied to elements on the page, and we’ve broken those styles out into a separate CSS file, as seen in Listing 4.2.

Listing 4.2 This CSS file is used to style elements throughout many of the examples in this chapter.

body {
     background-color: #FFF;
}

img {
     border-width: 0;
}

img#arrow, img#arrowImg {
     width: 147px;
     height: 82px;
}

#button1, #button2 {
     width: 113px;
     height: 33px;
}

.centered {
     text-align: center;
}

#adBanner {
     width: 400px;
     height: 75px;
}

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.images['arrow’ ].src=’ images/arrow_on.gif’"

    When the user moves the mouse over the image (the src of the arrow id), the replacement image arrow_on.gif, which is inside the images directory, is swapped into the document.

  3. onmouseout="document.images['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" id="arrow" alt="arrow">

    The image link defines the source of the original image for the page.

  • + Share This
  • 🔖 Save To Your Account