COM271, Week 10

Rollover Buttons: Using JavaScript to Swap Images

Syllabus | Table of Pages | Assignments | References and Useful Links

To make a traditional rollover button, you need at least two images:

Normal:

Rollover state:

The difference is intended to provide some visual feedback to the user. Here, when the user mouses over the normal button, we want it to change to the rollover version. Here it is in practice (roll over to see it work):

Here's the javascript:

<img name="mybutton" id="mybutton" src="../images/button_normal.jpg" width="120" height="20"
onmouseover="document.mybutton.src='../images/button_over.jpg';"
onmouseout="document.mybutton.src='../images/button_normal.jpg';" />

Creation of elaborate graphic's based menus is a lost art. Or, it should be. The photoshop complement ImageReady, which comes bundled with Photoshop, can be used to create the original artwork, and images for any additional states (normal, over, active, and visited). Entire menus are constructed, and all of the artwork and html, including javascript functions to generalize the swapping, are created by ImageReady. It takes a bit of learning, but if you are required to do graphic menus, it's how it is done.

I strongly suggest that you don't engage in this time-consuming and somewhat old-fashioned approach. Instead, you may want to create simple background images (the button, complete with drop shadow, and its hover state variation), and insert these into the background of all navigation links. Insert the alternative image into the background of any hovered links. Change font colors and background image using CSS, and you have most of the desired visual feedback, without any messy or cumbersome scripting. If you later want to change the text of the menu, you just change text, and you don't have to go back to ImageReady for a couple hours of work to recreate the graphic version of the text.

Keep it simple. Keep it fast.