PI7 Rollover Button

PI7 has lots of great rollover buttons in the Component Designer, but did you know that you can make rollovers with your own images? The Rollover command is part of the Web menu. You can make a button that changes on Mouseover, Mousedown or both. This tutorial shows you how to make your own goldfish rollover button that changes color and "jumps" a few pixels on the Mouseover state, then changes color again and reverses direction on Mousedown. Take this little button below for a test ride by running your mouse over it and clicking. You'll have to hold down on the mouse click for a few seconds to see the Mousedown state.


You can download the UFO button objects for this rollover tutorial here.

Open up the goldfish button objects in PI7. You'll see several Grouped Path objects making up the goldfish. The button and "Link" text are Image objects. What we'll do is change the color of the goldfish to green on mouseover, and then change the color to aqua and flip him horizontally on mousedown.

To get two exact copies of the button objects, hit Ctrl+D two times. The original button will be your Default button. Click the blue title bar of the first duplicate to make it active. With the Path Drawing tool, right click on the Grouped goldfish objects and choose Ungroup. Then click on just the goldfish to make it active. In the Attributes toolbar, click in the Color box and choose a dark green, RGB=0, 102, 0. Because this is a rounded, 3D object, the color will look lighter, a glowing lime green.

edit goldfish color to green

Right click, Select All Objects. Then right click, Merge as Single Object.

Click on the blue title bar of the second duplicate to make it active. Right click on the goldfish objects and choose Ungroup. Click on the goldfish to make it active. In the Attributes toolbar, click in the Color box and choose a bright aqua color, RGB=0, 136, 136. Using the Layer Manager, select all of the goldfish objects, including the body, two eyes and two whites of eyes, so all of them are selected at the same time.

select goldfish objects in layer manager

Right click, Merge as Single Object. Next, choose Edit, Rotate & Flip, Flip Horizontally. Drag the aqua fish to that it's on the right side of the button.

color goldfish aqua, then flip horizontally

Right click, Select All Objects. Then right click, Merge as Single Object.

Click on the blue title bar for the original button with the orange goldfish. Click on an object to select one, then right click, Select All Objects. Right click, Merge as Single Object. Now that you have all three buttons made, it's time to put them together in a rollover.

With the Pick tool, drag both of the duplicate buttons on top of the original goldfish button. Right click, Select All Objects. All three buttons have to be selected at the same time for the rollover command to work.

all three buttons selected

Choose Web, Rollover (or Shift+R) to open the Rollover dialog box. Most likely the buttons shown for Default, Mouseover and Mousedown will not be the correct ones. Click the down arrow under each button state and select the thumbnail for the correct button. I want this button to "jump" 3 pixels down and to the right on mouseover, so I've entered the X and Y coordinates for Mouseover as 3 and 3.

set attributes for rollover

Note in the dialog box above that you can assign a URL to the button, a Target frame if desired, Alt text and Status bar text. You can also select an Image Optimizer web image type. I've selected GIF. Run your mouse over the button in the Preview window and click the button. You'll see a real time preview of how the button will look on a web page. When you're satisfied that it looks good, click OK.

Don't panic if you only see one button in the work space. The Rollover command has combined them into a single rollover. If you right click and choose Web Attributes, Split Rollover, you'll lose the rollover attributes and be returned to three separate objects. If you want to edit the rollover, you can right click and choose Edit Rollover Object, which would re-open the Rollover dialog box for editing.

In this tutorial, I'm just making one rollover button to show you how it works. If you had a series of buttons to make for a web page, obviously you'd have to repeat these steps for creating each rollover button. After you make your rollover buttons, drag them onto an image that's big enough to hold then in a vertical or horizontal row with no overlapping, like this (only with different text on each one).

a row of buttons

Select the Slice tool. In the Attributes toolbar, choose Auto Slice. To save the rollover button(s), choose File, Save for Web, As HTML. When the Save As dialog box opens, the button(s) will be saved aligned in a table on a web page. All of the images will be saved to an "images" subfolder (PI7 will create an images subfolder for you, if necessary).

saves as HTML page

Note in the screen shot above that I have selected "Export to Microsoft FrontPage." If you use FrontPage, you'll love this option. It will open the saved HTML page in FrontPage for you. Just select the table and copy it into your Clipboard...

page opens in FP automatically

then paste it into another web page. That's how I got the rollover button at the beginning of this tutorial onto the page.

This tutorial uploaded 2/8/02

Do not duplicate, translate, copy, archive, appropriate or redistribute this document.



Back to Homepage