PI7 Remote Rollovers

If you like the idea of remote rollovers on a web page but you've  struggled unsuccessfully with the coding, you'll love PI7. Its new Script Effects make remote rollovers a snap! (View remote rollover effect web page here)

remote rollovers

It takes some careful slicing with the Slice tool, but then any cell in the sliced image can be selected to trigger a rollover in any other cell. You should already be comfortable using the Slice tool, and with making and saving pages as HTML in PI, before attempting this tutorial.

If you are interested in other tutorials on using PI to build web pages, you may want to check out my Component Designer Web Page, Web Album, Template Library Slide Show, Image Map, Web Page Edited With FrontPage, Vertical Scrolling Text and Images, CSS Fixed Background Scrolling Text, Customizing a Web Page Template, Link Object Web Page, Popup Menu and Basic Web Page tutorials.

In the example in this tutorial, any time the mouse rolls over a heart shaped button, different text appears in the center of the image. When the mouse is no longer over the heart button, the default image, with no text, appears again.

You can use any image of your choosing, or you can practice using my Raggedy Ann and heart navigation buttons. Get the image here. Just right click and save the entire image to your hard drive. If you don't want to do the slicing yourself, you can get the slicing pattern here.

Open the Raggedy Ann image in the work space. Select the Slicer tool. If you're going to use the slicing pattern I made, click the Folder icon in the Attributes toolbar and import the slicing pattern. The cuts will be made automatically. If you want to do it yourself, make vertical cuts at the edges of the buttons on each side. Then make horizontal slices separating the buttons. Finally, make a rectangular slice in the middle of the dress, just over the small buttons. This rectangular slice is where the remote rollover text will go. You can see the slicing pattern below.

sliced image

To assign web attributes to your web page, select Web, Web Properties (or Shift+Enter) to open the dialog box. Fill in the desired information in each tab, as shown below.

Web Properties

Don't forget to go to the Image File tab and select a JPG, GIF or PNG option for saving the sliced images. I've saved mine in GIF file format. Click OK to close the Web Properties dialog box.

Choose File, Save for Web, As HTML. When the Save As dialog box opens, browse to and find a folder to which you wish to save the web page and sliced images, then click Save. What you'll end up with is an HTML page plus a sub-folder called images which contains all of the sliced images from the web page. The sliced images are named for the web page. I called my web page "raggedy.htm," so my images were named raggedy_1.gif, raggedy2_gif, etc. Find the remote rollover text image (e.g., raggedy_8.gif) and open it up in the work space. Alternatively, just right click on the image below and save it to your hard drive to use.

remote rollover slice

Next, let's make 6 different versions of this image, each with different text, to correspond with the 6 big heart shaped buttons. Start with the Photos button. Select the Text tool. Use any font and color you like to make 2D text for the remote rollovers. I've used Comic Sans, Size=18, Color=white. Click in image to open the Text Entry Box and type in:

Photos of
My Family
and Friends

Click OK to close the Text Entry box. Position the text in the center of the image. Right click and Merge All. It should look like this.

enter Photos remote rollover text

Choose Web, Image Optimizer (or hit F4). Save this image as photos.gif, and save it to the same folder that holds all of the sliced images for the web page. Return to the image, right click and Undo. That will Undo the Merge of the text with the base image. Right click and choose Edit Text. Enter text as follows for the remaining 5 buttons:

Graphics remote rollover text About remote rollover text Causes remote rollover text

Gallery remote rollover text Blog remote rollover text

Save each image as a GIF. Name them graphics.gif, about.gif, causes.gif, gallery.gif and blog.gif, to correspond with the buttons which will trigger the remote rollovers. After you make and save all 6 text rollover images, close out the small, original rollover image without saving any changes. Remember, you need this plain image with no text as the default for the rollovers.

Select the Slice tool again. In the Attributes toolbar, select the Pick. Click on the slice that holds the Photos heart shaped button to select it. Right click and choose Script Effects, Swap Image to open the dialog box.

Swap Image dialog box

Leave the default event of "onMouseOver" selected. Select the box that says "Display effect on event: onMouseOver," and click on the rectangular cell that will hold the remote rollover text. It will have a red outline showing that it has been selected. In the "Swap image" selection, click the folder icon to browse to the remote rollover image. In this case, browse to and select photos.gif. Because we want the default image to appear when the cursor leaves the Photos button, select "Restore after rollover."

Click OK when you have completed all of these tasks. Take your time and be careful, or your remote rollovers may not work (or they'll roll over in the wrong cell). Always select that middle cell for the swap effect. Click OK to close the dialog box.

Check to be sure that you did it correctly. Choose File, Preview in Browser. When your browser window opens, roll your mouse over the Photos button. You should see the remote rollover text appear, then disappear when you move the mouse away from the Photos button.

If all goes well and you can see the remote rollover, select each of the 5 remaining heart shaped button slices and repeat the Swap Image script. You will, of course, use a different "Swap image" for each one. For example, you will use the awards.gif button for the swap associated with the Awards heart shaped button. Note that each heart shaped button cell has a little blue and white icon on it, indicating that a script has been attached to those cells.

cells with scripts are marked

Preview your work frequently to make sure the remote rollovers are working properly. If you make a mistake, it is easy to edit the remote rollover script effect. While the Slice tool is selected, click the Pick tool in the Attributes toolbar and select the cell that needs editing. If the Slice Panel is not displayed, click the Panel button in the Attributes toolbar to display it. Click the Script Effects tab to access the information for that cell. Where it says "Triggered by cell" click the plus (+) sign to reveal the Swap Image effect, and select Swap Image.

edit script effect

Click the Modify Script Effect button (arrow). Doing so will re-open the Swap Image dialog box. Now you can edit the Swap Image effect so that it works properly.

Choose File, Preview in Browser one last time to make sure that all 6 remote rollovers work OK. If all is well, choose File, Save for Web, As HTML. When you get the Save As dialog box, save to the same folder to which you previously saved the sliced image, but be sure to give the web page a different name. I named mine "index.htm." That way all of the images are named for the page, e.g., index_1.gif, index_2.gif, etc.

Then it's time to upload the files to your web server. Be careful to have your file structure on your server mirror the file structure on your local computer. Specifically, make sure that you upload all of the images named for the web page to an images folder on your server, including the space.gif image that holds everything together in a table on your web page.

This tutorial uploaded 11/02/01

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



Back to Homepage