Panic Button Rollover Interface

In this tutorial, we'll learn how to make a "push button" type interface, using an object-based .UFO file and the Rollover feature in PI's web tools.
PhotoImpact Version: 8 (Can be done in version 6, with slight modifications which are included in this tutorial)
User Level: Advanced. Users should understand the use of the Layer Manager in PhotoImpact and creation of object-based projects. Some knowledge of HTML code is required in order to incorporate the finished rollover into a web page.
You will need: An object-based interface design in .UFO file format, with button components saved as individual objects. If you like, you may use the file demonstrated in this tutorial, which is available for download here.
  1. Open your .UFO file in PhotoImpact, and open the Layer manager. In Layer Manager, the button objects must be above any other objects occupying the same space in the image, e.g. the word "Panic" and the red button layer in the example are above the other components. If the objects are not arranged in this way, PI cannot render the HTML code for the rollover correctly.
If you're using your own .UFO file and have already created the multiple objects you need for a rollover button, you can skip this section and go to step 7.
  1. The rollover created in this example will have three modes:
    • Normal--RED
    • Mouse Over--YELLOW
    • Mouse Down--GREEN
    In order to do this, we must have three copies of the button, so select the "Panic" layer and the red button layer and duplicate them twice. You should have a total of 3 copies of each.
  2. You can now merge the top copies of "Panic" and the red button as a single object. This creates the object for our "Normal" state.
  3. Click on the middle red button layer in the Layer Manager, click on the Path Drawing Tool and change the color to yellow.
  4. Click on the bottom red button layer, click on the Path Drawing Tool and change the color to green.
  5. Merge one of the remaining "Panic" objects with the yellow button object and the other with the green button object.

  1. We're ready to make a rollover! Select all three of the button objects in Layer Manager.
    Note to PI6 users: At this point, you'll need to use "Align left" and "Align top" to realign your yellow and green buttons with the original red button.
  2. Press SHIFT+R to bring up the Rollover toolbar. You can also click on Web>Rollover on Menu Bar at the top of the PI window.
  3. If the normal, mouse over and mouse down objects were arranged from top to bottom in Layer Manager, they should come up in correct position. If not, click on the pull down arrow under each state you wish to change, and select the correct object. The "Preview" area allows you to test the Rollover before closing the window.
  4. Enter the URL for the HTML file to which you're linking the button. If the file is not in the same web folder as the file with your rollover button, be sure to use the complete web address of the link.
  5. There are also areas to designate a target window in which to open the link, if you don't wish to open it in the same browser window, and for a status bar message to be shown when the rollover is activated.
  6. Choose the GIF button of the Image Optimizer, and click on the Optimizer tool button. Click "OK" on the Optimizer menu, then click "OK" on the Rollover menu.
  7. When the PI window returns to your .UFO file, you'll see only the "Normal" state object displayed in Layer Manager. Don't panic--look closely at the icon for object type for that object. It's been changed to a "Web Object" icon, and it contains all three of the rollover component objects.
  1. Now we're going to play with PI's handy-dandy Slice tool. Select the Slice Tool. Be sure the "Protect Web Objects" box is checked. Click on the "Auto Slice" button.
  2. If you want the image to have a transparent background, the "cells" around the edge of the image will have to be optimized as .gif files. Click on the "Pick Tool" in the Slice toolbar. Select the first cell you wish to optimize by left clicking on it. Open the Slice Tool panel, and select the "Optimizer" tab. Choose the GIF button, and click on the Optimizer Tool button.
  3. Leave the Slice panel open, so that once you've optimized the first cell, you only need to select each additional cell to be optimized by clicking on it, then choose the GIF button and optimize.
  4. It's a good idea to save your work to a .UFO file at this point, so you can make easily make changes in the slicing of the image or the web objects, if you need to do so later.
Note to PI6 users: You'll need to hide the base image of the .UFO in order to save with transparent background. Your Slicer is found by pressing CTRL+S or clicking on "Web>Slicer..." on the Menu bar. Your Slicer interface is actually easier to use. The menu comes up in "Pick" mode, so all you need to do is click on each cell and use the GIF format without leaving the menu.

  1. Now we're ready to save the rollover to a HTML to create the code for a webpage. Click on "File>Save For Web>As HTML...". Save the file to disk.
  2. To insert your rollover script in a web page, you'll have to open the HTML file in Wordpad or a HTML editing program. There are two sections to the file. The Java script portion is within the "HEAD" portion of the file between the "SCRIPT" tags. This portion of the code must be copied and pasted in the the "HEAD" portion of the HTML code of your web page. The second part of the rollover is a table containing the layout of the sliced image. This lies between the "TABLE" tags of your rollover HTML file, and is pasted into your web page code at the position where you want your rollover to appear. When copying and pasting the code, be sure to include the tags!! Be sure to upload the "Images" folder generated when you saved the rollover HTML code to the same web folder as your webpage file.

Update 1/24/04 by R. Hickman
Contents Copyright 2003-2004 by R. Hickman