10 steps to create a rollover button

In this tutorial I will show you how to create a roll over button with Dreamweaver. A rollover button is an image that changes when your mouse rolls over the image. Before creating the roll over action two images must be created. A before and after.

Here is my before and after images.

homepage06    about1b

1.) Open up dreamweaver

2.) Select your web page

3.) Select your button


4.) Go to insert/ image objects/ rollover image


5.) Browse to your original image and select.

6.) Browse to your roll over image and select. If you know what page you would like to link the button to then insert the url in the go to url section. In this example,  I will add my link later. Select OK.


7.) Delete the old button

8.) Save the changes

9.)Press F12 on your keyboard to test in a web browser


10.) Check out the final results click http://www.cdesign8.com/chalkzone.html

Also consider signing up for the new e-course for using Photoshop go to http://www.cdesign8.com


One Response to 10 steps to create a rollover button

  1. Hi, nice post. I have been pondering this issue,so thanks for sharing. I’ll definitely be subscribing to your posts.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: