How To Make an Image Roll Over with JavaScript
You've seen images on web sites that putting your cursor
over an image causes the image to roll over into another
image. This article shows you a method that also tells the
browser to preload the second image.
A preloaded image bypasses the pause that would otherwise
be present the first time a rollover is called for.
(If you prefer to use a generator that will create rollovers for
you, visit http://bontragercgi.com/JS_Rollover_Generator.html
)
Making an Image Roll Over
Start with a regular image IMG tag. This tag contains the
image to display when the cursor is not over the top of it.
The IMG tag needs a name attribute. The format is
name="image1", where "image1" is the name of the IMG tag.
Here is an example IMG tag:
The code that produces the image rollover is in two parts,
an anchor A tag and some JavaScript.
The A tag must have an href attribute. The href's URL can
be to another web page or to the JavaScript function that's
described below. If the latter, clicking won't actually do
anything.
Here is an example A tag with the IMG tag:
In the A tag, the style attribute suppresses the single
underscore character sometimes seen before or after the
image when an image is linked.
The href attribute's URL, in the example, is to the
JavaScript function that's described below, called with a
null value. (The null value, specified with two single-quote
characters, makes the function do nothing.) The href URL
could be to any web page on the Internet, instead, by
replacing the entire value between the double quotation
marks.
The onmouseover and onmouseout both call the same JavaScript
function that's described below. They are called with values
'over' and 'off', respectively.
Here is the JavaScript:
Two changes need to be done:
-
Replace the value of CursorOver.src (between the
quotation marks) with the URL of the image that
shall replace the current image when the mouse
is over the current image.
-
Replace the value of CursorOff.src (between the
quotation marks) with the same URL you already
have for the src attribute of the IMG tag.
Those are the only changes that need to be done.
The four lines — two with "new Image();" (no quotes) at
the end of the line and two with the image URLs at the end
of the line — preload the rollover image and provide a
consistent way of switching between the two.
Below the four preload/assignment lines is the function
ImageRollOver(). This function does the switching.
The function can receive an 'over' value, an 'off' value,
or a null value.
-
If the function receives an 'over' value, which
means the mouse is over the image, it switches the
image to the CursorOver.src image.
-
If it receives a 'off', meaning the mouse has moved
off the image, the function switches back to the original.
-
If it receives a null value, the function does
nothing.
Put the JavaScript somewhere below the original image, near
the bottom of the page. Right above the closing </body>
tag, could work well. If the JavaScript is below any other
images on the page, the rollover image will preload after
the immediately visible images are loaded.
About Image Preloading
There are two image loading distinctions, those that are
visible when a web page first loads and those that might
become visible later.
If only the visible images are loaded first, the page can
render more quickly. After the visible images are loaded,
when they won't slow down the page, then the "maybe later"
images can preload in anticipation of being needed.
That's how it works with this rollover code. The first
image is loaded and displayed. Later, the second image
is preloaded. When the mouse cursor moves over the first
image, the preloaded second image can replace it instantly.
Now, if the user moves the mouse cursor over the first
image before the second image has had time to finish
preloading, then the rollover will lag until the second
image is ready.
Because of the possibility of a lag for fast users, there
is the argument that the preloading should occur before
the first image displays. It's a valid argument. The only
downside I see is that the original image then takes a bit
longer to display when the page first loads.
Because I prefer fastest page loads, my preference is to
preload images after the immediately visible images have
been loaded. However, if you prefer to preload before the
first image is displayed, simply move the JavaScript toward
the top of the page. It can even be put into the HEAD area.
The browser runs any JavaScript not within functions when
the JavaScript is encountered. Thus, where you put the
JavaScript in the source code influences when preloading
takes place.
Putting It All Together
1.
Put the example HTML code of the A tag with the IMG tag
where you want the image to be displayed.
Change the IMG tag src attribute's value to the URL of
the image you want to display when the page first loads.
Change the IMG tag's width and height attribute values if
needed.
2.
Place the JavaScript as low on the page as you can (so the
rollover image preload occurs after immediately visible
images are loaded).
Replace the value of CursorOver.src with the URL of the
image to display when the mouse cursor is over the image.
Replace the value of CursorOff.src with the value of the
IMG tag's src attribute.
More Than One Rollover On a Page
If you'll have more than one image to roll over, duplicate
the above and then change the following:
-
In the A tag:
-
In the IMG tag:
-
In the JavaScript:
-
In the first four lines, change the CursorOver
and CursorOff instances to end with the character
"B". That would be CursorOverB, CursorOverB.src,
CursorOffB, and CursorOffB.src
-
Change the function name from ImageRollOver to
ImageRollOverB
-
In the function, change both instances of
image1.src to image2.src
-
In the function, change CursorOver.src to
CursorOverB.src and change CursorOff.src to
CursorOffB.src
For still another image to roll over, use "C" instead of "B"
and "3" instead of "2" in the above instructions.
Doing it the above way will work. However, it isn't
critical that "B" and "C", or "2" and "3", are used,
provided the function name, variable names, and IMG tag
name are different for each image/JavaScript set.
Once you've made a rollover several times, you'll better
understand what needs to be done and, probably, how it
works. And with preloaded images, your web site will be
more responsive than those that don't preload.
Question:
Did you find this article interesting and understandable? How can it be improved?
Your response is anonymous.
When done typing, click anywhere outside the box. [more info]
Will Bontrager
©Copyright 2006 Bontrager Connection, LLC Bontrager Connection, LLC
Please note:
Articles on this website are presented "as is". However -
If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.
