Volume I - Issue II - January 2001
Tech Techniques
Java Rollovers in the Tools
David Mortensen
Editor, EZ-NetAdvantage!
Warning! I don't want to discourage you, but you should know that using Java rollovers is not easy. I received a number of requests for a how-to article on rollovers. With some reluctance, I will attempt to consolidate this rather broad topic into concise, usable instruction. It won't be a comprehensive lesson, but it will get you started. That said, let's get down to business.

What is a Java Rollover?
Have you ever made a simple flipbook animation? Java Rollovers work a little like that. At first, the image just sits there static. Then, when the mouse pointer passes over it, the image is quickly switched to another. If the second image is slightly offset, a slightly different color, or something else along those lines, the effect is that of a simple animation. To see it in action, hover your mouse over the 3rd door.
+
=
To make a simple java rollover, you need at least the two images, some javascript and some HTML. Sound complicated? Good. Like I said, it is somewhat complex, but I will try to make it as simple as possible.

Use them Sparingly!
I can't stress this enough. Do not overuse rollovers! Remember that load times increase dramatically because you are actually loading up two images for every rollover. And, as with so many of the fancy things that you can do on the Internet (i.e. animated GIFs, Flash, video, midi files, etc.), overuse quickly becomes tacky.

Where Will Your Rollover Go?
If you want a rollover within the body of your document, as I have done above, then I will send you elsewhere to get the code. I grabbed the code for the door rollover above from Bravenet. They include both the javascript, the HTML, and enough instruction to get you going. Just upload your own graphics, modify their code to refer to those pictures as per their instructions, and insert it all in a HTML Block in EZ-PageBuilder™.

Java Rollovers in the Sidebar
If you want java rollovers in the sidebar there are other considerations. Jonathan Duncan, from ICServ's marketing department, made a Java Rollover Wizard for use in the sidebar that simplifies the process dramatically.

Remember, this is only for java rollovers in the sidebar. Hover your mouse over the graphical elements in the sidebar on the left to see what I mean. Would you like that for your site? First, there are some things you should know.
  • This is for sidebar use only.
  • Your first sidebar graphic must be the first block on the page.
  • There may not be any static graphics in-between the rollover images in the sidebar.
  • You cannot have more than one graphic in the header.
If you meet the above qualifications, have at least two graphics prepared, and are brave enough to try it, let's proceed to the Rollover Wizard.
Java Rollover Wizard