Creating Image Rollovers

A rollover is an image or section of an image that changes appearance when the user activates it. Web designers frequently create rollovers for the buttons of a navigation bar. When a user clicks a button, the browser displays the linked Web page (or file), and the rollover area displays a different button.

You can assign a rollover to both a sliced and mapped image by choosing a file for the slice or area to display when the user performs a specific mouse action.

Generally, you should have a good understanding of how the Image Mapper and Image Slicer features work before making an image rollover. There are tutorials to help you gain a better understanding of these features. Visit Jasc's Web site, click the Support link, and on the Support page click the Learning Center link. There you'll find links to Paint Shop Pro tutorials, as well as the Tutorial Archive link.

To create image rollovers:

  1. Create the image that will be used as the rollover image. Often this second image is a duplicate of the original, but modified to appear differently when the mouse rolls over the original image.

  2. Choose File > Export > Image Mapper or Image Slicer to open the Image Mapper or Image Slicer dialog.

  3. If necessary, navigate to an image region, and then use the appropriate tool (rectangle, ellipse, polygon) to specify the region where you want to add a rollover.

  4. Click the Rollover Creator button to open the Rollover Creator dialog.

Viewing a Preview: Click the Preview button to view your work in a Web browser window.

  1. Select the check box of the action you want used to activate the rollover: Mouse over, Mouse out, Mouse click, Mouse double-click, Mouse up, Mouse down, and then click the Open button to open the Select Rollover dialog.

  2. Navigate to and select the graphics file you want to use. (For example, you could select the duplicated and modified image described in step 1.)

  3. Click Open. On the Rollover Creator dialog, the File box displays the file path.

  4. For each action you want associated with a rollover, mark the check box and choose a rollover file.
    Note:     If you do not select a file, then the original file is used.

  5. Click Close to return to the Image Mapper or Image Slicer dialog.

Related Topics

Setting Map Preferences

Saving and Load the Map Settings

Saving the Image Maps

Saving Images for the Web

Embedding a Digital Watermark

Previewing images in a Web Browser