PI6 Rollover Buttons


Ballerina MooseThere are lots of nice rollover buttons in the Component Designer, but sometimes you'll want to make your own rollover buttons. 

For example, I've made an entire web set featuring the moose ballerina at left, and I wanted to make rollover buttons that matched the border background and header. So I made three buttons, one for each of the three button states, to compliment the border background I made. (View web set with rollover buttons)




This tutorial will show you how to take your own 3 buttons and turn them into a rollover effect on a web page. Make each button just a little different, so you'll see some differences on mousedown and mouseover.

I started with a new file 1200 pixels wide X 500 pixels high. This gives me a wide enough page that the border won't repeat itself on a large monitor. It also gives me a web page that's just tall enough to hold a couple of rows of buttons and a horizontal bar. You might need to make your page taller if you plan to add a lot of text. When I made new file, I clicked "Web Background" and selected the border background I wanted to use. If you're not sure how to make a new web page and assign it attributes, check out my tutorial on making a Basic Page in PI6. Add your header graphic, horizontal bar and any necessary text (reduced size screen shot below).

Screen Shot of New Web Page

Now to add the rollover buttons. Open all three buttons up in the work space and put them all into one new file. It doesn't matter how big the new file is, just that all three buttons are in there. 

Select one button with the Pick or Selection tool, then Shift+Click the other two buttons, so that all three are selected at the same time. Choose Web, Rollover.

select all 3 buttons at the same time

When the Rollover dialog box opens, click the down arrow underneath Default, Mouseover and Mousedown and select the button for each state. Assign a URL, and add Target, Alt text and Status bar information as desired. If you just want the rollover to work with no associated URL, you can put the generic # in the URL field. Select an Optimizer option: JPG, GIF or PNG. I'm saving these buttons as GIF's.

Rollovers dialog box

To preview the rollover effect, roll your mouse over the button and click on it in the Preview window. To view how the rollover will look in a browser, click the "Preview in Browser" down arrow and select a browser. The rollover will be displayed, along with the java script for the rollover and the image information. You can align the buttons with the Align buttons, and offset the buttons by a number of pixels if desired, too.

Once you're satisfied with the button, click OK. You'll get a little cautionary dialog box reminding you that to save the image as a web object with web properties, you'll need to save the entire page as an HTML web page. Click OK to close that dialog box.

You'll notice that now it looks like there's only one button in your base image. Don't be alarmed, all three buttons are still there. To prove it to yourself, right click on the button and choose Edit Rollover. Doing so will open the Rollover dialog box again. From there you can edit the button if you need to. Click OK to close the Rollover box.

looks like there's only one button

Drag the Rollover Button onto the web page image. Make the rest of your buttons the same way. For example, for this tutorial I made 6 buttons. I aligned each row of buttons by selecting the entire row then choosing Web, Align, Align Vertically. Then I did Web, Align, Space Evenly, Space Horizontally. Make sure that the buttons do not overlap each other, and that they don't overlap any other graphics on the page.

align buttons on page 

Choose File, Save for Web, As HTML. When the Save As dialog box opens, give the HTML page a name and save it to a folder on your hard drive. PI6 will save the HTML page to the folder you've selected, and create an images subfolder into which all of the images will be saved.  

If you use Windows Explorer to take a look at the images subfolder, you'll notice that the names of the images refer to the page name (e.g., index), the order in which they appear on the page, and for the rollover buttons, each image is appended with "normal," "over" or "down" for the button state.

Windows Explorer view of Images folder

Note also that there is an image called "space." This is a very important little image, because it is a clear spacer which aligns the images properly within tables. When you upload your Rollover Button web page, make sure that you upload all of the images to an images directory on your server. If you don't have an images directory, make one and upload the images to it.

Click here to view completed Rollover Button page. This web set, with or without rollover buttons, is available through my shareware web site, West of the Moon Graphics.

This tutorial uploaded 11/10/00

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



Back to Homepage