Gary L. Simmons  rev 06/17/03  webwonks.org/WebBuilding/Rollovers.html
Home  Marathon  Joke OT Weak  Web Building  Resumé  Lynx  Hobbies  Extra  Site Map Resume Joke of the Weak Go to next department

Gary's Web Building

JavaScript Rollovers

An interactive button, also called a rollover, changes its appearance when a cursor passes over the top of it. Making a graphic change when the mouse cursor is positioned over it gives the user a visual clue that the graphic is clickable, more so than just a static image. Rollovers can also be used to pop up a graphic that will give the user more information about the link they are about to click.

Rollovers are created by writing JavaScript in your HTML code. Basically the JavaScript swaps one graphic for another graphic when it detects the mouse cursor over it. For instance you can have a graphic of the words, "Photo Album" be swapped with a graphic the
  same size with the same words where the words appear to be glowing or electrified etc.

There are different variations of the JavaScript codes to do this, in this tutorial we will use the same code I borrowed from the O'Reilly and Associates Inc book "Web Design in a Nutshell" by Jennifer Niederst. She borrowed it from Nick Heinle also of O'Reilly and Associates Inc, you can borrow it from me. For a working example of the code discussed here look at the Hobbies page. The bulletin board is an image I drew then sliced with Fireworks and enhanced with JavaScript rollovers. It was the first rollover I ever attempted, if I can do that, so can you!

  • Two buttons:

    First you need to create two versions of the same button. One button represents the "off" state and the other button represents the "on" state. Both buttons 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 buttons because you really do have to go out of your way to resize a graphic.

  • Two buttons swapped:

    The below example swaps images when the cursor is over 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>Three Rollover Buttons</TITLE>
    A <SCRIPT LANGUAGE = "JavaScript" type="text/javascript">
    B <!--
    C if (document.images) {

    D img1on = new Image(); // Active images
    img1on.src = "imagelon.gif";
    img2on = new Image();
    img2on.src = "image2on.gif";
    img3on = new Image();
    img3on.src = "image3on.gif";

    E img1off = new Image(); // Inactive images
    img1off.src = "imageloff.gif";
    img2off = new Image();
    img2off.src = ''image2off.gif'';
    img3off = new Image();
    img3off.src = "image3off.gif";
    }

    F function imgOn(imgName) {
    if (document.images) {
    document[imgName].src = eval(imgName + "on.src");
    }
    }

    G function imgOff(imgName) {
    if (document.images) {
    document[imgName].src = eval(imgName + "off.src");
    }
    }
    / / _ _ >
    < /SCRIPT>
    < /HEAD>

    < BODY BGCOLOR="#FFFFFF">
    H <A HREF = "page1.html"
    I onMouseOver = "imgOn('img1')"
    J onMouseOut = "imgOff('img1')">
    < IMG NAME = "imgl'' BORDER=0 HEIGHT=20 WIDTH=125 SRC="image1off. gif"></A>

    < A HREF = ''page2.html"
    onMouseOver = "imgOn('img2')"
    onMouseOut = "imgOff('img2')">
    < IMG NAME = "img2" BORDER=0 HEIGHT=20 WIDTH=125 SRC="image2off. gif"></A>

    < A HREF = "page3.html"
    onMouseOver = "imgOn('img3')"
    onMouseOut = "imgOff('img3')">
    < IMG NAME = "img3" BORDER=0 HEIGHT=20 WIDTH=125 SRC="image3off. gif"></A>

    < /BODY>
    < /HTML>


    Now for the explanation of how the above code works:

    A The browser needs to know what you are doing. This statement defines your code as "JavaScript"

    B Why comment out the code? You put JavaScript code between the comment tags (<! -- . . . //-->) so that browsers that do not recognize JavaScript will ignore it. Savvy browsers can still read your code.

    C The "If" statement is for browsers that support JavaScript but do not support images objects. All the functions in this script are contingent on the browser recognizing the images object. If "document.images" is not recognized, the browser can not display the rollover effect.

    D All of your graphics that depict the "on" state of your buttons are preloaded into memory here and an image object is created for them.

    E All of your graphics that depict the "off" state of your buttons are preloaded into memory here and an image object is created for them. I only used 3 buttons in my working example on the Hobbies page (at the time of this writing, there may be more now) but to add more buttons just keep following the naming convention and add more "on" and "off" statements and corresponding button graphics. You may also check out the rollovers on the Joke of the Week page.

    F This is the function that activates the button graphic and is called from your anchor tag. This function refers to the name of your graphic by the object name you gave it when you preloaded it into memory. As the mouse cursor passes over the graphic the MouseOver event handler passes the name of the image to this function. The function adds "on" to the image object name.

    G This function is the same as described in comment "F" above and handles the "off" graphics.

    H This is the HTML for one of the buttons within the <BODY> of the document. There are actually two things happening here. First, the button is assigned a name within the <IMG> tag. JavaScript uses this name to refer to this particular graphic slot. The actual JavaScript commands, called event handlers, need to go within the anchor <A> tag.

    I This portion says to perform the "imgOn" function when the mouse is over the graphic and it passes the image name to that function.

    J This portion says to perform the "imgOff" function when the mouse leaves the area of the graphic.

  • Animate your rollovers!

    " Bu bu Bu Bu but it IS animated" you say, "it did something when I rolled over it!" Well, have you thought of using an animated GIF as your "imgOn" GIF? That didn't occur to me until just recently and I wondered if it would work because I have never seen it done before (that I noticed anyway). I tried it out on the Site Map page and it works great! Now normally I would completely avoid such an obnoxious action by an animated GIF as you see on the Site Map page but consider this, it only animates when you provoke it by rolling your mouse cursor over it. It is not constantly nagging like a forth wife at the corner of your eyeballs to leave whatever important work they are doing at the time to glance at it. So go nuts, do something fun and wild but remember you don't want too much extra baggage of very big GIF files. Keep in mind that just by using rollovers, you have doubled the download time of your graphics, making them animated rollovers is even worse.

    Animated rollovers are easy to do. If you already have some rollovers you have created, just replace the "
    imgOn" file with an animated GIF of the same file name. That way you do not have to touch a letter of JavaScript or HTML! If you are creating a new rollover just follow the tutorial above and create an animated GIF for each of the "imgOn" GIFs. If you need it I have written a tutorial on creating animated GIFs.

  • That's it kids:

    That is all you have do to add cool looking JavaScript rollovers without 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 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 kids got it easy let me tell you, when I did rollovers I had to type them in by hand! Before that we used to punch the binary into concrete blocks with our bare knuckles! Bah, you punks got it so easy... you all make me sick.

Top of page

Back to Web Building