Dreamweaver: Adding Rollover Images

Adding rollover images (images that change when the mouse passes over them) can be a way to jazz up your website. To make rollover images, you need to start with two images that are the same size in the same directory. Many people use images that are very similar with only slight differences. This trickery gives the reader the impression that images, like menu items or buttons, are 'lighting up' when, in fact, they're being replaced completely. (Notice our example to the left.)

Once you have two same-sized images in your working directory, follow these steps to add them as a rollover to your Dreamweaver document.

Click the "Add Rollover Image" Icon (right).
Fill out the appropriate information in the Rollover image dialog box (shown below):
Image Name - names the image so it can be referred to later.
Original Image - the image that will appear when the mouse is not over the image.
Rollover Image - the image that will appear when the mouse is over the image.
When Clicked, Go To URL - a hyperlink reference for the image.

Dreamweaver Rollover Dialog Box
(Click for Enlargement)
The image will be added to your Dreamweaver document. To see how the rollover looks, you will have to preview your document in a browser.

Rollovers can be used for menus, for highlighting, or simply for making documents really nifty. You should be aware, though, that the more complicated and high-end your web pages are, the more likely it is that some people won't be able to see your pages at all.

Back