Rollover Buttons/Images

Rollover Buttons or Images using Fireworks or Dreamweaver

Tool(s) Required:

Graphics Editor: Fireworks 4 or above (Adobe Fireworks CS3 recommended)
      (or)
HTML Editor: Dreamweaver 4 or above (Adobe Dreamweaver CS3 recommended )

Introduction

Using Rollover Buttons & Images is one of the most common web design ideas adapted by designers the world over because of its simplicity. Creating Rollover buttons or images using Adobe Fireworks or Adobe Dreamweaver is very easy. Read on!

Example 2: This example uses Rollover Images, Vector Shapes, Paste Inside, Drop Shadow

Example 1: This example uses Swap Images, Rollover Buttons, Curves, Vector Shapes, Paste Inside, Drop Shadow. View/Buy complete site using this design: Template 7 - Food

What it does

In Rollovers, a button or image changes (swaps) itself on rolling over it (onMouseOver event) and reverts back to the original image on rolling out of the web object (onMouseOut event). The on-rollover images are preloaded into the page when it is loading, this ensures that the rollovers are displayed quickly. Place your mouse over the Buttons in Example 1 and the Images in Example 2 to see their rollover effect.

How it works

The whole functionality is controlled by the JavaScript functions automatically generated by Fireworks or Dreamweaver. These functions are very optimized and you can always trust the code generated by Adobe Software :-) If you are a programmer-cum-designer it is good to know what the code does: There are 4 functions generated MM_preloadImages, MM_swapImage, MM_swapImgRestore and MM_findObj. Their names are self explanatory to what they do.

Create your own attractive Rollover Buttons and Images

Using Macromedia Fireworks: Create a new file in Fireworks and follow these steps:

• Position the initial buttons/image to be displayed correctly and place it in a layer named "buttons" or "links" in Frame 1.

• Duplicate the buttons/images layer once. Double click the new layer name and rename it to "rollovers". Tick the "share across frames" option which is seen while naming the layer and then click outside. Lock and make invisible the buttons/images layer.

• In layer "rollovers", change the color/effect of the rollover buttons or rollover images.

• Open the Frames panel, you will see just one frame called Frame1". Duplicate the frame once. Go back to Layer Panel(make sure the frame 1 selected before going back to layer panel)

• Open the "Web Layer" and insert separate slices for all the buttons/images. Open the Behaviors Panel. Now, select all the rollover buttons/images slices and click the (+) button in the behaviors panel, select Simple Rollover from the list. Another way to do it is, select individual slices, right click and select Add Simple Rollover Behavior from the list.

• View how they work in the preview window and then export your PNG file. Fireworks will automatically create your html file and images in the directory specified. While exporting just check if the HTML and images option is selected in the 'Save as Type' list box and the export slices option is selected in the 'Slices' list box. Test your HTML file in your browser.

You have just learnt to create your very own rollover buttons and rollover images using Macromedia Fireworks!

Using Macromedia Dreamweaver:

1. Design your buttons/images and their rollovers in any graphic editor. Export them to your site's images folder.
2. Now in your web page, click Insert > Image Objects > Rollover Image. In the pop-up window that appears give your rollover a name, alt tag, link and browse to locate the Original Image and Rollover Image. Click on OK.

That's it, you have just learnt to create your very own rollover buttons and rollover images using Macromedia Dreamweaver!

Learn how to use advanced Rollovers (Rollover Swap Images) in Fireworks.

Learn how to make Text Links Rollovers in our Cool Text Effects using CSS Styles tutorial.

Absolutely FREE Web Templates
Check out these quality free web templates and download them without any registration or sign-up!

FREE Flash Actionscript & Animation Guide
Learn Flash the easy way using these easy-to-follow tutorials! Get your basics right or learn advanced flash actionscript!

Quality Dreamweaver Templates
Professional quality dreamweaver templates in over 20 categories, starting at just $9.95! Instant download & easy customization