Rollover Buttons
I'm defining a rollover as an element of a web page that changes when the user hovers the mouse over it. This helps the user know that clicking on the element will do something.
There are many ways that this effect can be achieved. Here's two different methods:
Bitmaps | Changing background colours |
|
|
Each has it's good and bad points:
The bitmap method gives you full control over the appearence of the button, you can create some impressive effects such as a light seeming to be switched on inside the button. With animated GIFs, a button could appear to sparkle when the mouse hovers over it. The downside is that for each button you need to load 2 bitmap images (you need to draw them too!) for a large menu, that could be 20 image files that the user has wait for. Also if the text on a button has to change you have to go back to your image editor.
The background colour method produces only a very simple effect but it's quicker to create, quicker to download and easier to edit at a later date.
The Code
Bitmap Buttons
Background colour changer
Note: Netscape 4.x doesn't seem to able to handle mouseOver events on a <td> element. To make the effect work in NS4 we use a <layer> element.
A final Gimmick
If you add a transparent background image to each <td> element, you can "shape" the buttons and add a highlight effect.
Here's the image (the pink areas must be made transparent).  Note that the image must exactly match the size of the <td>, or else you'll get some strange looking results.
In the next (forthcoming) part I'll cover using CSS (Cascading Style Sheets) to produce rollover effects.
| 
Innisfree Housing