Quick links to procedures on this page:
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:
| • |
Normal — displays the default state |
| • |
Over — is triggered when you point to it |
| • |
Down — is triggered when you click it |
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.
| 1 . |
Click Window  Dockers Rollovers. |
| 3 . |
In the Rollovers docker, click the Create rollover from object button  . |
|
|
|
|
|
In the Rollover docker, click the Delete rollover button  .
|
|
|
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.
| 2 . |
Click Window Toolbars Internet. |
| 3 . |
On the Internet toolbar, click the Edit rollover button. |
| 4 . |
In the Rollover docker, choose one of the following rollover states from the States list box: |
| 6 . |
On the Internet toolbar, click the Finish rollover button. |
|
|
|
|
|
In the Rollovers docker, click Reset.
|
|
|
On the Internet toolbar, click the Extract rollover objects button.
|
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.
| 1 . |
In the Rollover docker, choose one of the following rollover states from the States list box: |
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.
| 1 . |
In the Rollover docker, choose one of the following rollover states from the States list box: |
| 2 . |
In the Object manager docker, select the object you want to modify. |
|
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.
| 1 . |
In the Rollover docker, choose one of the following rollover states from the States list box: |
| 2 . |
In the Object manager docker, select the object you want to remove. |
If you delete an object using the Delete key, the object is deleted from all rollover states.
Not all suite components documented in this Help are available in our Trial, Academic, and OEM versions. Unavailable components may include Corel applications, product features, third-party utilities, and extra content files.
Copyright 2018 Corel Corporation. All rights reserved.
.
, and drag in the image window to create a brushstroke.
.