How to Create a Rollover Effect in Adobe Dreamweaver

Rollovers are one of the most basic features of navigation, and creating one right in Adobe Dreamweaver is very easy.

Step One

Create a Div, the div in which you’re going to insert the rollover images. We assume that you already know to work with divs and that it is not just one div you work with but a whole navigation bar you already set up.

Step Two

In Photoshop or in Fireworks create the two images that are going to make up the two rollover states. (again, we assume that this will be a part of a larger process).

Step Three

In this next step we turn to Dreamweaver and and focus on the Common tab of the Insert floating window: Window>Insert>Common. We click on the image icon which is placed 6 icons from the left. We click on the little arrow to it’s right and reveal the Rollover Image Icon.

A dialogue box opens next, and it it we browse first to the file that appears when the button is “off” and below it we browse to the file that appears when the button is “on”. Below these two choices we add an alternative description and a URL of where the file links to on the site.

And that’s it, repeat the process as many times as you need in order to complete your navigation bar.