• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 4. Image Basics > Creating More Effective Rollovers

Creating More Effective Rollovers

To make the illusion of animation work, you need to make sure that the replacement image appears immediately, with no delay while it is fetched from the server. To do that, you use JavaScript to preload all the images into the browser's cache (so that they are already on the user's hard disk when they are needed) and place the images into variables used by your script. Then when the user moves the mouse over an image, the script swaps out one variable containing an image for a second variable containing the replacement image. Script 4.2 shows how it is done. The visible result is the same as in Figures 4.1 and 4.2, but the apparent animation is smoother.

Script 4.2. This is a better way to do rollovers than in Script 4.1, because it won't cause errors in older browsers and the animation is smoother.

To create a better rollover

if (document.images) {
     arrowRed = new Image
     arrowBlue = new Image
     arrowRed.src =
     → "images/redArrow.gif"
     arrowBlue.src =
     → "images/blueArrow.gif"

This code checks to see if the browser understands image objects (see sidebar). If the browser does, the code creates arrowRed and arrowBlue, two separate image objects. Then, using the .src property, it fills the src properties of the two objects with the GIFs of the red and blue arrows.

else {
     arrowRed = ""
     arrowBlue = ""
     document.arrow = ""

This is the code that tells old browsers (ones that failed the test in step 1) what to do. In order to keep from getting error messages in old browsers, we have to create some dummy variables—that is, variables that won't do anything but be created and set to an empty string. Think of them as placeholders. Create two variables named arrowRed and arrowBlue, and set them to empty. Then create and set document.arrow to empty, too.

A Slick Way to Deal with the Browser Version Problem

The bane of the HTML author (not to mention the JavaScript author) is making sure that the pages you create will work as intended on older browsers (or at least they won't look really horrible). One way to handle this problem would be to write code that checks for specific older browsers. You could write code that loops repeatedly and says to the browser “Are you Netscape 2? Are you Netscape 3? How about Internet Explorer 2.0?” and so on, stopping when it gets a positive answer. Trouble is, there are so many browser versions out there now that it's almost impossible to make code like this work, especially because the code becomes obsolete every time some company releases a new browser version. Besides, some browsers actually hide their identities, reporting themselves as some other browser. Browser makers do this in the name of compatibility, but it makes life harder for the JavaScript coder.

Script 4.2 makes an end run around the browser version problem by checking document.images, which in effect says, “Does the browser understand image objects?”

The trick here is that document.images is only implemented in JavaScript 1.1 and later, which was released with Netscape 3.0, and therefore eliminates a whole class of older browsers in one swoop.

<a href="next.html" onmouseover=
→ "document.arrow.src=arrowRed.src"
→ onmouseout="document.arrow.src=
→ arrowBlue.src">

The rest of the rollover gets handled in the anchor tag. When the user puts the mouse over the blue arrow graphic (onmouseover), the script swaps the blue arrow for the graphic with the red arrow (document.arrow. src=arrowRed.src). When the mouse cursor leaves the area of the graphic, the script reverts the graphic back to the blue arrow.

✓ Tips

  • When you prepare your graphics for rollovers, make sure that all your GIF images are not transparent. If they are, you will be able to see the image you are trying to replace beneath the transparent image—and that's not what you want.

  • Both the original and the replacement images need to have identical dimensions. Otherwise, while they will look fine in Internet Explorer, some browsers (such as old versions of Netscape) will resize the images for you and you probably won't like the distorted result.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint