Creating and editing rollovers

A rollover is an interactive image that changes in appearance when you click or point to it. For example, you can make a button change color when it is clicked, or display text when you point to it. Rollovers are frequently used on webpages as navigation buttons.

Creating rollovers

Rollovers are made by using objects, such as shapes, brushstrokes and text. You can use a single object or a group of objects, such as an ellipse with text on it. Rollovers consist of the following states:

Each state consists of an object or multiple objects.

The three states of a rollover: normal, over, and down

Editing rollover objects

You can edit rollover states by adding, modifying and removing objects in each state. When you create a rollover, the original objects are copied to the normal, over, and down states. Adding an object to a rollover state adds the object to all states. However, any changes you make to an object are applied only to the current state. You can also remove objects from the current state.

If you want to create a rollover by using an editable area or the background, they must first be converted to objects. For more information about defining editable areas, see Working with masks.

When you create a rollover, the image is sliced, and the rollover becomes a slice. For more information on working with image slices, and exporting and optimizing sliced images, see Slicing images.

To create a rollover

1 .	Click Window Dockers Rollovers.

3 .	In the Rollovers docker, click the Create rollover from object button .

6 .	Click the Apply changes button .

You can also
Delete a rollover	In the Rollover docker, click the Delete rollover button .
Modify an existing rollover	In the Rollover docker, click the Edit rollover button .

In the Object manager docker, rollover objects are highlighted, grouped, and appear with a Rollover object icon beside the name. The Text rollover object icon indicates that the rollover object is text.

Overlapping rollovers cannot be exported. You must move the rollover so it no longer overlaps with another rollover object.

You can select a single object to start, and then add other objects to it to change the appearance of the rollover.

To edit a rollover

Rollover objects appear with a Rollover object icon beside the name.

2 .	Click Window Toolbars Internet.

When you extract a rollover to simple objects, the component objects are named automatically.

It is not possible to edit two rollovers at the same time.

You can edit a rollover by double-clicking it in the image window.

You can also edit a rollover by clicking the Edit rollover button in the Rollover docker.

To add an object to a rollover

You can also
Add brushstrokes	In the toolbox, click the Paint tool , and drag in the image window to create a brushstroke.
Add text	Click the Text tool , click in the image window, and type the text.

For more information about adding shapes and brushstrokes, see Working with objects. For more information about adding text, see Creating and formatting text.

You can also create objects from the image background and editable areas. For information, see Working with objects.

All brushstrokes are added to the active object by default. You can also create an object by clicking the New object button in the Object manager docker. If the Object manager docker is not open, click Window Dockers Object manager.

To modify an object in the current rollover state

If the Object manager docker is not open, click Window Dockers Object manager.

For more information about changing objects, see Working with objects and Modifying objects.

You can also paint text or change the color, fill, and formatting. For more information about modifying text, see Creating and formatting text.

A rollover can display different text in each of the normal, over and down states. To edit text in a rollover, click the Text tool , point to the text until the pointer becomes a cursor, and select the text. Type new text to replace the current text.

To remove an object from the current rollover state

3 .	Double-click the Eraser tool .

If you delete an object using the Delete key, the object is deleted from all rollover states.

---

Was this page helpful? Send feedback. (Internet connection required.)

---

Copyright 2016 Corel Corporation. All rights reserved.