Learn HTML step-by-step from A to Z or improve your professional skills.  Home HTML and CSS Tutorials How to make Rollover Buttons using DreamWeaver in less than 5 minutes!
Your Ad Here

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.

image 2

image 3

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

Click to enlarge
Click to enlarge

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

image 5

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
Click to enlarge

5. Now your button will be on your canvas.

image 7

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.

image 8

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

How to make Rollover Buttons using DreamWeaver in less than 5 minutes Tutorial: Final Result



Author's URL: Akpro.net
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

HTML is Hyper Text Markup Language that is used to make hypermedia and hypertext documents for the Web. More HTML and CSS: Most Popular Materials | Fresh Materials | More HTML Tutorials at Markuptutorials.com

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

Only registered users can write comment

No comments yet...