Making a rollover button:

A rollover button is an element on your webpage that changes in some way when you mouse over it.

It is easy to create a change in text in dreamweaver, but if you want to make a rollover image it is easier to create it in photoshop, save it as an image and then insert it into your webpage in dreamweaver.

Start by opening up your psd in photoshop. Choose the element of the page you want to change, and think about what you want it to do. You can have the image change size, change color, add text or change the complete image. If you can do it in photoshop you can put it on your webpage.

So open up your image in photoshop and make the change to the image.

Save the new image (call it rollover or similar).

Copy and paste the image into your photoshop web page and position it over the original thumbnail. You can switch on and off the layers to make sure it is in the right spot. When you are happy with the position of the image, make sure the new thumb layer is switched on and the old thumb layer is off.

Now go to your slice select tool. You are going to rename the slices with your new thumbnails. Name them clearly ‘button_1_ro’ or similar so that it is easy to find them in DW.

When you have re-named the slices, go to file – save for web and devices. Using the shift key select only the newly renamed slices. They will have a darker line around them to show they are selected.

Hit save. In the next window, select where you want to save your new slices, which is in your website folder. Do not worry about naming it, as you have already named your slices.

At the bottom of the page, under format, you need to select ‘images only’, settings should stay as ‘default’ and slices should be ‘selected slices’.

Hit save.

Now go into DW and open up your page.

Select the image within the page that you are using as a rollover and hit delete.

Now go to ‘insert’, ‘image objects’ and select ‘rollover image’

A dialog window will pop up.

Image name: you can just leave this as the default image name.

Original image: select your original slice (the one you just deleted) from you images folder

Rollover image: select your new image, the one you just saved

Alt text: tag your image as appropriate

When clicked…. You can make your link here, either to an external URL or to the page, gallery or quick time movie of your choice. You do not have to make your link here, you can do this back in your DW page.

When you’re all done, click okay and your rollover will be complete. Check your page in a browser and make sure it all works.