Creating an image rollover effect

In a rollover effect, one image is replaced by another when a user “rolls” the mouse pointer over the original image. The transition takes place when the mouse pointer enters the bounds of the original image; when the mouse pointer exits the bounds of the second image, the original image is restored.

The most common use of rollover effects is to provide visual feedback when the user moves the pointer over an image that serves as a button. The button looks different when the pointer is over it, indicating that the image is indeed a button that can be clicked.

(To see an example of a rollover effect, move the mouse pointer over the image below.)

Namo Web Editor 4.image.rollover.1 Creating an image rollover effect

To create a rollover effect on an image
  1. Double-click the desired image.
  2. Click the Rollover tab.
  3. In the Second image path box, enter the path of the replacement image, or do one of the following:
    • Click Namo Web Editor button browse Creating an image rollover effect (Browse) to find and select an image file from your local file system.
    • Click Namo Web Editor button clip art Creating an image rollover effect (Clip Art) to select an image from the clip art library.
    • Click Namo Web Editor button site Creating an image rollover effect (Site) to select from a list of image files belonging to the current local site (if one is open).
  4. To preview the rollover effect, move the mouse pointer over the Preview pane.
  5. Click OK.
To remote a rollover effect on an image
  1. Double-click the desired image.
  2. Click the Rollover tab.
  3. Click Remove Rollover, and then click OK.

Creating an image rollover effect