Simple Rollovers

This is a simple button using the Dreamweaver Insert Rollover Image icon in the Objects palette under Common.

The first, original 'up' or 'off' state image is the basic logo that loads with the page:

the second 'over' or 'on' state is only shown when the user rolls their mouse pointer over the logo:

Note that the 'over' image will be stretched or shrunk to match the size of the original 'up' image, so for best results make sure they really are the same size!

To copy these to your own computer to try this out, PC users should right click on the images above to save them to disk into your site-root folder.

Mac users either Control click or just hold the mouse button down for a little while and then choose 'download image to disk' or simply drag and drop the images to your desktop before adding them to your site-root folder .

Imageready and Fireworks can speed the manufacture of button states, or simply do a 'save as' of your original state and work on copies of the file to create a same-size version for the 'over' state.

Using the rollover palette in Imageready to make Normal, Over, Down, Click, Out and Up states by applying 'Styles'

Dreamweaver Navigation bars can feature up to 4 different states: Dreamweaver calls these Up, Over, Down and Over While Down.