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.
Some rollovers can be performed with CSS, using the :hover pseduo class. However, we will look at basic JavaScript to perform this function. Both work, and each provides their own pros and cons to the table – so it is helpful to know both.
Rollover Rules/Tips
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.
Disjointed Rollovers
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
Dreamweaver will create JavaScript code for you. This code can be a bit complicated and hard to understand. I recommend not touching it, as if you break the code, you may not be able to fix it.
I also want to point out one of the negatives to using Dreamweaver’s JavaScript for image rollovers. It makes it so you have to include it in each page. This will make all of your files slightly larger. Probably not enough to really matter for download times, but I am very conscious of things like this – so I personally find it disappointing.
Creating Image Rollovers in Dreamweaver was originally found on Access 2 Learn
