Creating Image Rollovers in JavaScript
Jim Zappen
Introduction and Overview
The following procedure explains how to make simple image rollovers in
JavaScript. Image rollovers permit greater interactivity with the user
and serve a useful purpose by showing a change in an image when the
user "rolls over" it with the mouse, thus indicating an active link to
another web page. The appearance of change in the image is, of course,
a visual trick, not an actual change in the image but a quick
substitution of one image for another, facilitated by a speedy
connection and a quick download. The procedure presumes some basic
knowledge of HTML but does not require any knowledge of computer
programming (though it will probably be more clear for someone who
understands the JavaScript document and properties concepts and the
general programming concept of variables).
The code for the image on the left side of this page shows how to cache
your images and execute the rollover. You can create your own image
rollovers by copying/pasting and revising the code or by using the
image-rollover function in one of the standard web authoring tools,
such as Dreamweaver or ImageReady.
Caching the Images
The first section of the code, steps (1) through (8), shows how to
cache your images so that they are loaded and ready for use when the
user "rolls over" your original image. Steps (1) and (8) identify the
language as JavaScript. Steps (2) and (7), which look like HTML comment
tags, hide your code from old non-JavaScript-compatible browsers. Steps
(3) and (5) define your variables (that is, your images) as the type
"new Image." Steps (4) and (6) load your images into source files so
that they are cached and ready for use. Caution: If you do not
cache your images, they will not be available and so may not appear
immediately when the user rolls over and off the original image.
Executing the Rollover
The second section of the code, steps (9) through (13), shows how to
execute the rollover. Steps (9) and (13) are the beginning and end of a
conventional HTML link. Step (12) defines the source of your original
image, which in this case is a cup of cool java (cooljava.gif). Step
(10) executes the MouseOver, that is, the action that the computer will
take when the user rolls the mouse over the image. In this case, the
action will be to replace the original image, the cup of cool java,
with a new image, a cup of hot java (hotjava.gif), which is loaded in
step (6). Step (11) executes the MouseOut, that is, the action that the
computer will take when the user rolls the mouse off the image. In this
case, the action will be to replace the new image, the cup of hot java,
with another new image, the cup of cool java, which is loaded in step
(4). The new image, of course, is the same as the original image, which
is loaded in step (12)--though it could also be a different (that is, a
third) image.
Creating Your Own Rollover
To create your own JavaScript image rollover(s), simply copy/paste the
code reproduced below into your HTML/XHTML file and revise it as
necessary, using your own image file names, or use one of the standard
web authoring tools, such as Dreamweaver or Photoshop ImageReady. Note:
Standard JavaScript code appears in regular type, document-specific
names in italics.
|
|
(1) <script language=JavaScript>
(2) <!--
(3) var cooljava=new Image();
(4) cooljava.src=" cooljava.gif";
(5) var hotjava=new Image();
(6) hotjava.src=" hotjava.gif";
(7) //-->
(8) </script>
(9) <a href=" cinnamon.html"
(10) onmouseover="document. java.src= hotjava.src"
(11) onmouseout="document. java.src= cooljava.src">
(12) <img id=" java" name=" java" align= left border= 0 hspace= 20 vspace= 20 width= 260 height= 335 alt=" Java" src=" cooljava.gif">
(13) </a>
|
To create your image rollover in Dreamweaver, open a new or old
document (File --> New or Open), select Insert Rollover Image from the
palette in the upper left corner, and type in the Image Name, the name
of the Original Image and the Rollover Image, and the appropriate URL
(to create the link to another web page). Be sure to check Preload
Rollover Image so that Dreamweaver will automatically cache your
images.
Resources
Some good, easy-to-use books on JavaScript are Nick Heinle and Bill
Peña's Designing with JavaScript: Creating Dynamic Web
Pages, 2nd ed., O'Reilly Web Studio (Sebastopol, California:
O'Reilly & Associates, 2002); and Tom Negrino and Dori Smith's
JavaScript for the World Wide Web, 3rd ed., Visual QuickStart
Guide (Berkeley, California: Peachpit Press, 1999). A good but more
detailed, more technical treatment of JavaScript is Danny Goodman's
JavaScript Bible, 4th ed. (Foster City, California: IDG Books
Worldwide, 2000).
An easy-to-use online repository of JavaScript code is available
at:
Credits
The cup of java on this page is adapted from a sample in Ray Dream
Studio 5.0. The JavaScript image rollover is adapted from Heinle and
Peña, Designing with JavaScript, pp. 105-10. The form
button is adapted from Heinle and Peña, Designing with
JavaScript, pp. 18-19. The Dynamic HTML Style Sheet (Internet
Explorer only) is adapted from Heinle and Peña, Designing
with JavaScript, pp. 139-44.
Comments/Questions
Please send comments and/or questions to Jim Zappen at zappenj@rpi.edu.
