How to Create a Rollover Button in Dreamweaver Without Using CSS

How to Create Graphic Rollover Buttons Using CSS in Dreamweaver - button1

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.

How to Create Graphic Rollover Buttons Using CSS in Dreamweaver - button2

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.

How to Create a Rollover Button in Dreamweaver Without Using CSS - rollover 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