How to make Rollover Buttons using DreamWeaver in less than 5 minutes!

1. This tutorial is NOT going to teach you how to design your button, we are going to assume that you already have your button ready, you will need an image of the original button and an image of how its going to look on a rollover, I have done my buttons in Photoshop.

2. Now open up Dreamweaver and start a new page, I'm going to start an HTML page.

Click to enlarge

3. Next, go to Insert > Image Objects > Rollover Image.

4. Now a window will come up, follow these instructions for what to fill in:

Image Name: (Type in the button name)
Original Image: Browse/Open your Original Button Image here
Rollover Image: Browse/Open your rollover Button Image here
Check Preload RollOver Image
Alternate Text: (Text that will show when mouse over)
URL: (Type the link of where the button will go to)

I did this like the following screen shot:

Click to enlarge

5. Now your button will be on your canvas.

6. Now lets preview it on our browser, I'm going to preview it on Fire Fox, though you can preview it on Internet Explorer or whatever your default browser is.

This concludes our tutorial, you should have something like this:

rr May 27, 2011 says:

Complain to this comment

hjuhfbgiuasdhgguipnehjuiortmyyhiojyt

david cameron May 27, 2011 says:

cheers, works brillinatly

vote labour!

dan ajet May 27, 2011 says:

this work terribly, jjessus

Amit April 15, 2011 says:

One more thing your rollover doesn't even work.

Is there a way to do this without clicking the insert rollover image thing,because it makes my code view very confusing.

Amy April 04, 2011 says:

I have made buttons in Photoshop using a rounded rectangle shape. If I make the background transparent (so the button can be used on any color background in Dreamweaver) I get ugly white marks around the button. If I change the background in Photoshop to the color of the background in Dreamweaver I don't get the ugly white marks. However, if I want my website to have multiple colored backgrounds then I'm having to make 20+ buttons! Is there a way to get rid of the ugly white edges around my buttons?

Nicholas grove January 15, 2011 says:

this is helpfull i would like to know how to you make your roll over button the 2nd image to slide left as you put your cusor over the button
please help

Tim September 24, 2010 says:

Thanks a lot this def helped!

Name August 30, 2010 says:

bt how can we see the effect? i have created in the same way only,bt i cannot see the rollover effect

Glen June 12, 2010 says:

thank you for your info