Create Navigation Panel with Rollover Images and Links

By: Staff Date: March 06, 2006 Recommended by: readers | Level: Intermediate

You probably want to create few rollover images which will represent navigation panel? You probably want that those images look different when users click on them? All these buttons you can create separately, but it is much better that you use Macromedia Dreamweaver frame for dialog "Insert Navigation Bar" and create all button at once.

You can create buttons by replacing images with same size but with small changes in their look. Every image represents one button state.

Now to create navigation panel you need to do next:

1. Choose object "Navigation Bar" in panel object (or choose Insert --> Image Object --> Navigation Bar),
2. You will see start button without name. Write name of your first button (if you skip this step, Dreamweaver will automatically add button name which will be the name same as picture saved name),
3. Find images for state up, over, and down. You can define and "over when down" state. The size o these images need to be same.
4. Write hyperlink in field "When clicked, go to URL:". You can write the URL or you can click on Browse and find a web page. Drop down menu next to URL enables you to aim link to certen frame,
5. Click field "Preload Images", if you want to enable automatic preload. Check field Show "Down Image" Initially only if you want that at the beginning down button state be visible,
6. Now add other navigation panel buttons by clicking on "+" and repeating steps from 2-5. If you want to delete navigation panel button just click on button "-"
7. On bottom of this setup window you can choose how you want to place your navigation panel on web page, horizontal or vertical. Just click on drop down menu and select position which you want. Check field "Use Tables" if you want that navigation panel be created inside table,
8. Basically this should be all. If you are finish with all setups all you have to do is to click on OK button to create navigation panel or click on Cancel to cancel all previous work.

To test your navigation panel click File --> Preview in Browser and test it. If navigation panel don't look like you want don't worry you can change him by choosing again object Navigation Bar.

Note: You can create only one navigation panel per page. All images for buttons which you are using in creating of navigation panel needs to be same size (up, over and down images).

Digg this!

Add to del.icio.us

Slashdot it!

Furl it!