Rollovers offer a nice and easy way to stylize your website, and provide some basic interaction. But rollovers are for more than just making things look nice. They (should – if done right) also give feedback to the user, to let them know that what their mouse is over will take them somewhere. It should seem obvious, but I still today will find websites that don’t do this, and it makes their users lives more challenging.
Rollovers require at least 2 different images. However, you can use up to 4 images if you want to capture each state. All images for a given button must be the same size for it to work properly. Otherwise your image could end of becoming miss-proportioned and/or cause other elements to “jump” as they move to make room or fill up room for the new image.
The different button states:
- normal or off – required
- over or on – “required”
- down – optional
- down and over – optional and rare
Adding a Simple Rollover
To add a rollover in Dreameaver follow these steps:
- Make sure you have necessary files. I recommend naming them with the core name, then state at the end of the file name. i.e. home_normal.jpg, home_over.jpg, home_down.jpg, etc.
- Place Cursor where you want your image button to be on the web page
- In the Insert Bar, under the Common tab > Image collection button (drop down) > choose Insert Rollover Image
- Fill out right fields correctly. This will include the image name, the link, and selecting your normal and over state images.
Animated Rollovers: A rollover image is any plain web image, so whether it be static or an animated GIF doesn’t matter. For simplicity though (and Dreamweaver doesn’t support it) don’t have one be an image and another be a Flash button.
These can be fun because as you rollover one section, another image is replaced. Think e-bay listings where you can rollover a thumbnail and see a larger version of the image.
In this case we use just the normal and mouse over functions. These are from the Tag panel group – behaviors.
Couple of important notes:
- You must have a link (even a # for the href) over the area to Dreamweaver can attach the code for the rollover effect
- You must name the image which will change
- The name you use must be unique to the page
Note about the code