Multiple JavaScript Rollovers

Gary L. Simmons

rev 06/17/03

webwonks.org/WebBuilding/MultipleRollover.html

Home

OK, now you are big and bad and creating JavaScript rollovers on your web pages. Time to move on and put a little more of that ol' mule punch into your rollovers by making each rollover change more than one graphic. In this instance I will show you how to make a normal rollover display an informational graphic as well. I know I know, it never ends, does it? Well no... it doesn't, else we'd all be dead right? I am willing to gamble that most everyone reading this is not quite dead yet.

This tutorial assumes that you have read and understand JavaScript Rollovers. If not, then you are in the wrong class me bucko. Your zipper is down too. You had better go learn the basic JavaScript Rollovers first or this more advanced multiple rollover tutorial will be of no use to you.

The JavaScript code I use here is from the book "Web Design in a Nutshell" by Jennifer Niederst. This is a pretty good book, if you are a beginner like me, you should buy it. I'll even help you, the ISBN is 1-56592-515-7, the publisher is O'Reilly and Associates, Inc. But before you rush off to Amazon.com, stay focused, lets finish the tutorial first.

For working examples of a multiple JavaScript rollover go to my Art page , Lynx page or NRA page. I created those using this JavaScript code. I have found that the inspiration, design and production of the artwork is at least 95% of the work. The JavaScript is pure plug-it-in grunt work, so don't sweat the JavaScript. You don't even have to understand it, just put it in the right place with the right names. This tutorial will show you how.

"Two buttons", party of 4, your table is ready:

First you need to create two versions of the same button, just as in the simple rollover. One button represents the "off" state and the other button represents the "on" state. The third and forth "buttons" are not really a button, they are for displaying information about the destination that the button you are clicking will take you to. Of course it does not have to be informational, it can be any graphic you want displayed when you roll over the first button, but regardless, you still need two images for this graphic too. One graphic has the information, the other is the same graphic "blanked out". All "on", "off" and "info", "blanked out" graphics have to have the exact same pixel dimensions or one of them will be resized by the browser. This is not a good thing, it looks terrible. What I do is to make my off button first then copy it a couple of times. I then mess around with the graphics of the copies making several different versions of the "on" button. This guarantees two identical sized on and off graphics because you really do have to go out of your way to resize a graphic.
Two buttons swapped, two infos swapped:

The below example swaps images when the cursor is over each button and displays a 3rd graphic in a separate location, a different graphic for each button. This code will work with NetScape Navigator 3.0 and higher and Internet Explorer 3.01 (for Macintosh only) and Internet Explorer 4.0 for all platforms. ALWAYS supply normal text links so folks with older browsers or with their graphics turned off can navigate your pages. First the script then the explanation.

< HTML>
< HEAD>
< TITLE>Multiple Rollovers</TITLE>
< SCRIPT LANGUAGE = "JavaScript">
< !--

if (document.images) {
img1on = new Image();
img1on.src = "jukeboxon.gif"; // Active Images
img2on = new Image();
img20n.src = "videoson.gif";

img1off = new Image();
img1off.src = "jukeboxoff.gif"; // Inactive Images
img20ff = new Image();
img20ff.src = "videosoff.gif";

A img1ad = new Image();
img1ad.src = "jukeboxinfo.gif"; // Information Images
img2ad = new Image();
img2ad.src = ''videosinfo.gif'';
}

// Function to 'activate' images.
function imgOn(imgName) {

if (document.images) {
document[imgName].src = eval(imgName + "on.src");
B document[''holder''].src = eval(imgName + "ad.src");
}
}

// Function to 'deactivate' images.
function imgOff(imgName) {
if (document.images) {
document[imgName].src = eval(imgName + "off.src");
C document["holder''].src = "clear.gif";
}
}
// -->

< /SCRIPT>
< /HEAD>
< BODY BGCOLOR = "#FFFFFF">

< !-- 1st Rollover -->
< A HREF = "jukebox.html"
onMouseOver = "imgOn('imgl')"
onMouseOut = "imgOff('imgl')">
< IMG NAME= "imgl" BORDER = 0 HEIGHT = 24 WIDTH = 100 SRC =
" jukeboxoff.gif"></A>

< !-- 2nd Rollover -->
< A HREF = "videos.html''
onMouseOver = "imgOn('img2')"
onMouseOut = "imgOff('img2')">
< IMG NAME= "img2" BORDER = 0 HEIGHT = 24 WIDTH = 100 SRC =
" videosoff.gif"></A>

< !-- Additional Image -->
D <IMG NAME = "holder" HEIGHT = 100 WIDTH =100 SRC = "clear.gif">
< /BODY>
< /HTML>

Now for the explanation of how the above code works:

A This portion preloads the information graphics and creates an image object for each of the "on" and "off' graphics before it.

B The function for activating the rollover buttons (turning them to their "on" state) now includes an additional line that changes the image in the "holder" graphic to one of the informational graphics.

C Similarly, the deactivate function in the JavaScript now contains a line that returns the "holder" graphic back to its "off" state (displaying "clear.gif").

D This is the IMG tag named holder where the information graphics will appear. It contains a graphic called "clear.gif" when neither button is activated.
Animate your rollovers!

Hey, you can animate these things. I discuss how on the JavaScript Rollover page. Look in this same location on that page for the write up.
That's it kids:

That is all you have do to add cool looking multiple JavaScript rollovers with out blowing up a browser that is unable to display them. Of course it can get a lot more complicated than this but this is the basic guts of even the most complicated of multiple rollovers, if you can get a grasp of this you will easily understand the rest. The hardest part of this is coming up with an idea then creating your graphic display. The easiest part of this is the fact that you can just copy and paste the code up there into your web page (you are safer however to copy it from the source code on the page the rollover appears on). Remember to change the names of the graphics you dopes. Like I said above there are working examples on the Art page , Lynx page and NRA page. Go look at those and play with the pretty colors then look at the code. It is all pretty straight forward. The JavaScript code at the top is commented out for browsers that are not Java savvy, browsers that are Java savvy know the trick and reads the comments as JavaScript. One word of warning... put the comment codes () on a separate line as they can also comment out JavaScript! OK, that was 18 words.