Vectorials
Flash Perfection
3D Lessons
Tutorialkit
Markup Tutorials
Learn PHP
network
adv banner
HTML and CSS  Home HTML and CSS Tutorials How to make Rollover Buttons using DreamWeaver in less than 5 minutes!
rss

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

Author: Akpro.net More by this author


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: www.akpro.net

Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

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