Creating Rollover Images

Often rollover images are used as links to other pages, but you can use them without links for visual appeal on your pages. The image changes when the pointer is over the image.

The Rollover Assistant provides a standard two-stage rollover image. Have the images you want to use available before opening the Rollover Assistant.

You can add additional image layers and text layers. With WebEasy, you can also add popups (usually ToolTip-like text, but you can use images) that appear next to the rollover image in its active state.

Note:  If you add a link to a rollover, you should not have more than three image layers in the rollover — usually two are sufficient. You can add extra layers and have them as ‘popups’.

To create a simple rollover image with a link:

1        On the Insert and Modify tab, click Picture > Rollover Image in the Insert section.

2        To change the first image, in the Layer column double-click the existing image. In the Choose Image dialog box, locate and select an image. Click Open.

3        To change the second image, repeat step 2 for the second layer.

4        To link the rollover image to a page, select the Link to Internet Web Page check box. In the Link dialog box, specify the URL and whether the page should open in a new window or not. Click OK.

5        Click OK.

Click the Advanced button to add image layers, to add text layers, to delete layers, or to move layers up or down in the list.

To create a new layer:

1        Select an existing layer.

2        Click Add Image Layer or Add Text Layer.

The new layer appears before the selected layer.

If you create a text layer, double-click the text icon in the first column to adjust the text in the Edit Text dialog box.

To adjust a rollover image after you create it, click Image > Rollover Image in the Modify section of the Insert and Modify tab.

Rollovers with Popups

On an actual web page, popup items show when the pointer is over the rollover image. If you have multiple popups, they show simultaneously stacked in a list.

Each rollover image must have at least two states: Normal Display and at least one Next Rollover. If you have added layers, to make a layer into a popup, double-click the Popup column for that layer.

In the workspace, WebEasy shows the popup layers below the rollover image. You can select a popup item and move it to a different location.