How to Create a Rollover Button in Dreamweaver Without Using CSS

You can create rollover buttons in Dreamweaver without using CSS Styles. If you are not familiar with CSS and you want to create rollover buttons, this is the best way for you to create them. It is easy and quick to do it this way. The downside is you have to create each rollover button. This tutorial will show you how to create a rollover button in Dreamweaver without using CSS.

You will need two buttons to use for this tutorial. I created two buttons really quickly for you to use. To the left you will find the two buttons. It is two graphics, so, you will have to save each one to your computer. Click the graphic to open it in a new window, then right click and click Save As. Save it to a file or destination on your computer. Do the same for the other button. Name the first button, button1. Name the second button, button2.

Creating a New Rollover Button

Create a new html document to work on and save it as your test document. Then go to the top of your Dreamweaver program and click Insert > Image Objects > Rollover Image. The box that opens is where you will enter the information for the rollover button. So, let’s take a look at this box.

Image Name – In the first field, you can give your image a name. This is not required, you can leave it as Image 1 if you want too.

Original Image & Rollover Image – These two fields are where you will insert the file for the buttons. At the end of the Original Image field, you will see the browse button. Click that button and locate Button1 that you saved and open it. Do the same for the Rollover Image field. This time you will select Button2.

Alternate Text – This is the text that appears when you mouse over the button. You can leave this field blank or you can type the name of the button in this field.

When Clicked; Go To URL – This is where you enter the link for the button. This is where you will be directed when you click the button. So, enter your link in this field.

Now you can click the OK button. Your button rollover button is now created. Go to the top of Dreamweaver and click File > Save or press CTRL S on your keyboard. Now you can preview your rollover button in a browser. Go to the top of the program and click File > Preview in Browser > and select the browser of your choice. Place your mouse over the button to see the rollover.

Now you can create other buttons if you want to. Just repeat the steps above. You can also use the buttons of your choice to create these rollover buttons.

This post is part of the series: Dreamweaver Tutorials

This collection of articles is aimed at providing education about the software program Dreamweaver.

1. Beginner’s Guide to Creating and Saving an HTML Document in Dreamweaver
2. Dreamweaver Tutorial: Tips for Link Management
3. Creating a New CSS Text Style in Dreamweaver
4. Creating a Jump Menu in Dreamweaver
5. Create a Photo Album for Your Website in Dreamweaver
6. Dreamweaver Tutorial: Mapping and Linking Images
7. Use CSS Styles to Create Solid Color Rollover Buttons in Dreamweaver
8. Incorporating Flash Buttons Into Your Dreamweaver Designs
9. Creating a Rollover Button in Dreamweaver Without Using CSS
10. Dreamweaver Tutorial: Creating and Inserting Flash Text into Your Document
11. Dreamweaver Tutorial: Inserting and Editing a Horizontal Line
12. How to Modify Your Page Properties in Dreamweaver
13. Adding Guestbook to Your Site Using Dreamweaver
14. Applying Pop Up Messages to Links In Dreamweaver
15. A Guide to Understanding the Properties Panel in Dreamweaver
16. Create a Tab Menu in Dreamweaver
17. Creating a List Menu in Dreamweaver
18. How to Create HTML Email with Dreamweaver