Quick links to procedures on this page:

•
 
•
 
•
 
•
 
•
 


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 Web pages as navigation buttons.


Creating rollovers

Rollovers are made 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.

Photo Paint web rollover Creating and editing rollovers

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

You can assign properties to a rollover, such as a Web address that opens when you click a rollover, and alternate text that displays when you point to it. You can specify a target for the down state which determines how a Web page opens in a browser window. You can also add sound to the over and down rollover states, which will play when these rollover states are activated.


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. For example, you can use different text for the over state by replacing the original text in that state. You can also remove objects from the current state.

If you want to create a rollover 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

Photo Paint btnbacktotop Creating and editing rollovers
1.
 
Select one or more objects.
When you create a rollover, the original objects are destroyed. If you want to retain the original objects, save them before you create a rollover.
2.
 
Click Web Photo Paint onestep Creating and editing rollovers Create rollover from object.
3.
 
In the Rollover docker, set any of the following properties for the rollover:
•
URL — specifies an address, or URL, for a Web page.
•
ALT — specifies the alternate text that displays when you point to a rollover.
4.
 
Choose one of the following rollover states from the States list box:
•
Normal
•
Over
•
Down
5.
 
Edit the selected rollover state by adding, removing, and modifying objects.
6.
 
Click the Finish editing button Photo Paint pgx finish editing Creating and editing rollovers.
Each state retains its component objects, so you can continue to edit the rollover.

You can also
Add sound to a rollover state
In the Sound box, type a filename of the sound you want to play when the selected state is triggered. You can also click the Browse button Photo Paint pgx save button Creating and editing rollovers to locate and choose the sound file.
Specify the target frame or browser window for the URL
Click a target type in the Target list box: _self opens the URL in the current frame, _blank opens the URL in a new browser window, _top opens the URL in the root frame of the browser, _parent opens the URL in the highest level frame.
Preview a rollover in a browser
In the Rollover docker, click the Preview in browser button Photo Paint pgx preview roll Creating and editing rollovers.
Create a new rollover
Click the Create rollover from object button Photo Paint pgx create roll Creating and editing rollovers.

Photo Paint note Creating and editing rollovers

•
 
In the Objects docker, rollover objects are highlighted, grouped, and have a Rollover object icon Photo Paint pgx roll object icon Creating and editing rollovers to the right of the object name. The Text rollover object icon Photo Paint pgx text rollover object Creating and editing rollovers indicates that the rollover object is text.
•
 
In the Objects docker, the Rollover object icon turns red when a rollover overlaps another rollover. Overlapping rollovers cannot be exported. You must move the rollover so it no longer overlaps with another rollover object.

Photo Paint tip Creating and editing rollovers

•
 
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

Photo Paint btnbacktotop Creating and editing rollovers
1.
 
In the Objects docker, select a rollover.
Rollovers have Rollover object icons Photo Paint pgx roll object icon Creating and editing rollovers to the right of their object names.
If the Objects docker is not open, click Window Photo Paint onestep Creating and editing rollovers Dockers Photo Paint onestep Creating and editing rollovers Objects.
2.
 
Click Web Photo Paint onestep Creating and editing rollovers Edit rollover.
3.
 
In the Rollover docker, choose one of the following rollover states from the States list box:
•
Normal
•
Over
•
Down
4.
 
Edit the rollover state by adding, removing, and modifying objects.
5.
 
Click the Finish editing button Photo Paint pgx finish editing Creating and editing rollovers.

You can also
Return a state to the current Normal state, so you can start over again
Click Reset.
Return all states in a rollover to simple objects
Click Web Photo Paint onestep Creating and editing rollovers Extract rollover.

Photo Paint note Creating and editing rollovers

•
 
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.

Photo Paint tip Creating and editing rollovers

•
 
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 Photo Paint pgx edit roll Creating and editing rollovers in the Rollover docker.

To add an object to a rollover

Photo Paint btnbacktotop Creating and editing rollovers
1.
 
In the Rollover docker, choose one of the following rollover states from the States list box:
•
Normal
•
Over
•
Down
2.
 
In the toolbox, click a shape tool.
3.
 
Drag in the image window to create a shape.
The object is added to all rollover states.

You can also
Add brushstrokes
In the toolbox, click the Paint tool Photo Paint pgx paint tool Creating and editing rollovers, and drag in the image window to create a brushstroke.
Add text
Click the Text tool Photo Paint loc pgx text tool Creating and editing rollovers, click in the image window, and type the text.

Photo Paint note Creating and editing rollovers

•
 
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.”

Photo Paint tip Creating and editing rollovers

•
 
All brushstrokes are added to the active object by default. You can also create an object by clicking the New object button Photo Paint pgx new object Creating and editing rollovers in the Objects docker. If the Objects docker is not open, click Window Photo Paint onestep Creating and editing rollovers Dockers Photo Paint onestep Creating and editing rollovers Objects.

To modify an object in the current rollover state

Photo Paint btnbacktotop Creating and editing rollovers
1.
 
In the Rollover docker, choose one of the following rollover states from the States list box:
•
Normal
•
Over
•
Down
2.
 
In the Objects docker, select the object you want to modify.
If the Objects docker is not open, click Window Photo Paint onestep Creating and editing rollovers Dockers Photo Paint onestep Creating and editing rollovers Objects.
3.
 
Modify the object.
The changes apply only to the object in the current state.

Photo Paint tip Creating and editing rollovers

•
 
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 Photo Paint loc pgx text tool Creating and editing rollovers , point to the text until the pointer becomes a cursor, and select the text. Type new text to replace the current text.

Photo Paint note Creating and editing rollovers

•
 
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.”

To remove an object from the current rollover state

Photo Paint btnbacktotop Creating and editing rollovers
1.
 
In the Rollover docker, choose one of the following rollover states from the States list box:
•
Normal
•
Over
•
Down
2.
 
In the Objects docker, select the object you want to remove.
3.
 
Double-click the Eraser tool Photo Paint pgx eraser tool Creating and editing rollovers.
The object is removed only from the current state.

Photo Paint note Creating and editing rollovers

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

Creating and editing rollovers