Adding Pictures That Roll Over

From Documentation
Jump to: navigation, search

Adding Pictures That Roll Over

You can use the Picture Rollover component to create JavaScript rollovers for any image on your site. Because this component uses JavaScript, the colors of your images are not compromised.

To add pictures that roll over:

  1. In Page view, select the Picture Rollover tool from the NOF Standard Components toolbox.
  2. Draw a box on the page where you want to locate the pictures.

A picture placeholder and the Picture Rollover Properties panel appear.

  1. To specify the first image to display, double-click the Initial image row, select the image from the Picture File Open dialog, and click Open.

The Picture Rollover Properties panel changes and displays two new rows Mouse over image and Mouse out image.

  1. To specify the image to display when the mouse pointer moves over the image, double-click the Mouse over image row, select the image from the Picture File Open dialog, and click Open.

The images you select for rollover pictures are resized to the size of the first image you select. For best results, use images that are the same size.

  1. To specify which image to display when the site visitor moves the mouse pointer off the picture, double-click the Mouse out image row, select the image from the Picture File Open dialog, and click Open.
  2. To link the image to a specific URL, double-click the Link URL row.

The Link dialog appears. Because the entire image is treated as one object, you can link it to another page, file, smart link, or external link, such as another site. See Creating Links.

  1. Specify the link information and click Link.

The details of the link appear in the right column of the button row.

You can add an action to an object using the Actions tab. See Building Dynamic Pages.