Image Rollovers

Rollover Image, Rollover Button Effect

Web Design Tutorials

Rollovers

Rollover Effect for Images and Buttons

Using image rollovers is one of the most common web design ideas adapted by designers the world over because of its simplicity. This tutorial teaches you how to create simple rollover images or buttons using Dreamweaver or Fireworks.
Demo: Mouse over the below images and right button menu links to see how image rollovers work.

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

 
 

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

 

What are Rollovers?

The Rollover effect is one in which a button or image web object, or group of them, changes (swaps itself) on mouse over to another web object (called rollovers) and reverts back to the original image on mouse out. Rollover images are preloaded into the page when it is loading, this ensures that the rollovers are displayed quickly. The onMouseOver and onMouseOut attributes of the link tag are used to make this functional. Place your mouse over the Buttons in Example 1 and the Images in Example 2 to see their rollover effect.

How do Rollover Images work?

The whole Rollover Images functionality is controlled by the JavaScript functions automatically generated by Fireworks or Dreamweaver. These functions are well optimized and you can always trust the code generated by these Adobe Software. If you are a designer-cum-programmer it is good to know what the code does: There are 4 key functions generated: 1) To Preload the Images 2) To Swap the Image 3) To Restore the Swapped Image 4) To find Image objects.

Prerequisite Knowledge

This tutorial teaches you how to create rollover images or buttons using Fireworks or Dreamweaver and thus assumes you are familiar with some design software, even if you are new to Adobe Fireworks or Adobe Dreamweaver. However be assured that our detailed instructions can be followed by even a beginner.

Rollovers in Fireworks

Create Rollover Images

After creating your design in Fireworks, follow these steps:

  • Step 1: If your design is all in one layer (say "layout" in Frame 1) you need to first separate the buttons or images to be given effects to another layer and lock the underlying design layer "layout" so it isn't disturbed.

  • Step 2: Position the initial buttons/image to be displayed correctly and move them to a separate layer named "buttons" or "links" in Frame 1.

  • Step 3: 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. Also "share across frames" the "layout" layer so the rollovers work correctly.

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

  • Step 5: Open the Frames panel; you will see just one frame called "Frame 1". Duplicate the frame once. Go back to Layers Panel (make sure that you are in frame 1 and not frame 2 before going back to the layers panel)

  • Step 6: 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.

  • Step 7: 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.

Well Done! You now know how to create your very own rollover buttons and rollover images using Fireworks!

Rollovers in Dreamweaver

Create Rollover Images

Follow these steps to create your own attractive Rollover Image effects using Dreamweaver:

  1. Design your buttons/images and their rollovers in any graphic editor. Export them to your site's images folder.
  2. Now open your web page in Dreamweaver click Insert > Image Objects > Rollover Image.
  3. 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 OK.

Rollovers using the Behaviours Window: Alternative to the above steps you can also create rollovers using the Swap Image Behaviour from the inbuilt Behaviours of Dreamweaver. This is very useful if you have already placed your images (with their links) on the page.

To locate the swap image behaviour go to Window > Behaviours, the Tag Inspector Panel will show up with the Behaviours Button as pressed. Just click on the plus (+) button shown and you'll see the Swap Image behaviour listed. Click it and a pop-up window asks you to select the image on your page to be swaped and the source of the swap image. Select these and click OK and your rollover image using the Dreamweaver Swap Image behaviour is done!

That's it; you now know how to quickly create your very own rollover buttons and rollover images using Dreamweaver!

Further reading:

Related Links :: Design Concepts | Design Basics | Web Design Tips
Design a Website | Website Header | Website Background
Website Navigation | Design Ideas

Software Required

Adobe Fireworks: Since this tutorial covers a core feature of Adobe Fireworks, any version of it will do.

Compatible Versions of Fireworks for this Tutorial

Fireworks CS6 Fireworks 4-8 | Fireworks CS3 | Fireworks CS4/CS5/CS6
Note: The features and instructions discussed in this tutorial are same across all Fireworks versions listed above; Screenshot images may differ. Recommended Version: Fireworks CS6

Compatible Versions of Dreamweaver for this Tutorial

Dreamweaver CS6 Dreamweaver 4-8 | Dreamweaver CS3 | Dreamweaver CS4/CS5/CS6
Note: The instructions in this tutorial are same across all Dreamweaver versions listed above; Screenshot images (if any) may differ. Recommended Version: Dreamweaver CS6
Please like, +1, link to and share this SmartWebby resource if you found it helpful. Thanks!