Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition)

2017-07-07 02:10:07

Image rollovers are one of the most popular JavaScript applications around. An image rollover is just an image that is replaced by a different image when someone positions the mouse pointer over it. Rollovers are often used with navigational elements to give viewers visual feedback indicating what will happen if they click on the image. This technique is particularly useful when you have a number of navigational elements positioned close together, and you want to make it easier to see which element they'll be clicking on.

Task: Exercise 13.5. A JavaScript Image Rollover

In this example, we're going to create a page that contains an image that will be swapped out when the pointer is moved over it. Image rollovers are generally made up of three components: an event handler associated with the image, a preload script to load the image that's not displayed when the page loads, and a function that switches between the two images. Let's take a look at each of these components.

Browser Detection

One big disadvantage of using JavaScript is that JavaScript works differently from browser to browser. A feature that exists in Firefox 1.5 might not exist in Microsoft Internet Explorer 6.0. This problem is compounded by the fact that JavaScript capabilities change from version to version of the browsers. Originally, most people handled this problem by determining which browser made the request and then turning on only those features that worked with that browser. Unfortunately, this was kind of an overly complex way to write JavaScript code. As new versions of browsers were released, all the JavaScript code with browser detection had to be changed.

Fortunately, a better technique is available. Rather than relying on the inexact technique of determining which browser the user is using, you can detect whether the actual object that you want to manipulate exists and then base your functionality on that. In this case, we need to manipulate the document.images object, which contains information about all the images used on the page. The browser detection code that we use is very simple; it consists of one statement:

if (document.images) { // manipulate image object here }

Any time you want to manipulate the images on the page, you wrap the code inside this if statement. If the browser acknowledges the existence of the document.images object, you can manipulate that object.

The Preload Script

When you add an image rollover to a web page, you should preload the images so that the first time the user moves the mouse over the rollover, the browser won't have to download the image before it can be displayed. Preload scripts load the images into memory so that they can appear instantly when the pointer is positioned over the image that they will replace. The preload script appears in the page header and simply creates new objects for all the images involved in the rollover. This sample page contains only one image, so the preload code is very simple:

if (document.images) { buttonOn = new Image(); buttonOn.src = "on.gif"; buttonOff = new Image(); buttonOff.src = "off.gif"; }

As you can see, the preload code is wrapped within the object detection code. Two new images are created, one containing the "on" image and the other containing the "off" image. When the page loads, both of the image files assigned to the attributes of the images will be downloaded.

The Rollover Functions

Two functions are associated with an image rolloverone that replaces the "on" image with the "off" image, and another that replaces the "off" image with the "on" image. In this example, the two functions are called activate and deactivate. Here's the source code:

function activate(image_name) { if (document.images) { document[image_name].src = eval(image_name + "On.src"); } } function deactivate(image_name) { if (document.images) { document[image_name].src = eval(image_name + "Off.src"); } }

Again, note that the object-detection code is used to protect users whose browsers don't allow the document's images to be manipulated using JavaScript. Both of these functions accept a single parameter: the name of the image that will be swapped out. In this particular example, I could have hard-coded the image name into the script because there's only one image on the page. However, passing the image name is more useful to you because you'll be able to use these scripts with pages that contain multiple image rollovers.

This is the most important code in the activate function:

document[image_name].src = eval(image_name + "On.src");

document[image_name] references the object on the page with the same name as the argument passed to the function. This code changes the src property of that argument to the "on" version of the image. The call to the eval() function concatenates the argument with the string On.src. If the argument to the function is button, the function call returns buttonOn.src. As you can see in the preload code, buttonOn.src is set to on.gif. So, this line of code changes the src property of the referenced object to on.gif.

For all this to work, you have to create images in your preload code with the same name as the images to which they correspond on the page. That way, the single argument to the function can be used to reference both the image objects created when the page was loaded and the image on the page itself. The code in the deactivate function works the same way, except that it assigns the "off" image to the image object on the page.

Calling the Functions

After all the code used to drive the rollover functions is in place, the next step is to place the image and event handlers on the page. Rollovers use the onmouseover and onmouseout event handlers associated with anchor tags to fire the image-swapping functions. In this example, we're going to place the image itself within a link, but we could just as easily associate the image rollover with a text link elsewhere on the page. The only thing different about the image tag in this example is that the name attribute is included so that we can associate the name that we used in the preload code with the image.

Here's the code that is used to place the image itself and fire the rollover functions:

As you can see, the link includes onmouseover and onmouseout attributes, which indicate the function that should be called when those events fire. The argument to the functions corresponds to the image name that we used.

Putting It All Together

When you've created your images and saved them in the proper folder, this code will create a dynamic page with images that turn on and off. The full source code for the page with the rollover is shown as follows:

Input

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>JavaScript Rollover Example</title> <script type="text/javascript" language="JavaScript">  </script> </head> <body> <a href="rollover.html" onmouseover="activate('button')" onmouseout="deactivate('button')"><img name="button" border="0" height="100" width="100" src="/books/2/631/1/html/2/off.gif"></a> </body> </html>