PI7 Pop-Up Menu

This tutorial will show you how to use PI7's cool Slice tool, then its new Script Effects to create interactive Pop-up Menus for your web pages. You can see the Pop-up Menu web page here.

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, Remote Rollovers and Basic Web Page tutorials.

Start by selecting File, New, New Web Page (or hit Shift+A). When the New Web Page dialog box opens, make a new 800 X 600 white web page by entering the desired values into the User-defined  section. Give the web page a name in the Title box. Click OK to open the image.

New Web Page dialog box

Now to add the interface object. You'll notice in PI7 that the EasyPalette is accessed from the Panel Manager, which runs vertically along the right side of the work space. Click on the EasyPalette button (arrow) to access it, then select the Path Library.

click the EasyPalette button

Drag the P1 object from the thumbnail into the middle of the new web page. All of the objects will be Grouped and active. Right click and select Ungroup, then hit the space bar to deactivate all objects. It will look like this.

P1 path object

Path and Text objects make up this complex object, which we'll use as an interface. All of the objects are editable, so we can change their colors, edit the text, and so on. Because there are so many objects, it can be difficult to select precisely the one you want to edit. To help select objects, click on the Layer Manager button (black arrow)  in the Panel Manager. The thumbnails for all the objects may appear quite small. To change the size of the thumbnails, click on the Thumbnail Size button (blue arrow) and select a different size. I like big thumbnails, so I selected 80 X 80 pixels.

open layer manager

Now if you are unable to simply click on an object to select it, you can select its thumbnail in the Layer Manager instead.

Choose the Path Drawing tool. In the Layer Manager scroll down to Obj-46, the blue glass screen. In the Attributes toolbar, click in the Color box and select a different color for the glass. I've selected a medium aqua color (RGB=102, 153, 153).

change color of glass object

If you wish to do so, you can change the color of the silver metallic interface by selecting each object's thumbnail in the Layer Manager, then double clicking on a thumbnail in the EasyPalette's Material Gallery. For simplicity's sake, I'm going to leave this interface in the default silver metallic tone.

Next, let's change the default text on the aqua screen, changing the color of the text as well. Select the Pick tool and click on the first line of yellow text, which says "PhotoImpact." Right click and choose Edit Text. When the Text Entry Box opens, select (highlight) the default text. Click in the Color box and select a pale yellow color, RGB=255, 255, 153. Edit the font Size to 20. You will barely be able to read it over the white background, but it will still look good against the aqua glass screen. If you wish to do so, select a different font. I'm leaving the default font selected. Now type over the default text the word "Archives" and click OK to close the box.

edit default text

Select and edit the remaining lines of default text using the same method, so that they read "Information," "Goodies," "Bulletin Board" and "Off Site." Make sure you edit the text color and font size each time, so the text is consistently the same color and size. Your text will look like this now.

text edited

Select Archives, then Shift+Click the other text objects so that all are selected at the same time. Right click, Align, Space Evenly. When the Space Evenly dialog box opens, choose to space Vertically, Fixed, 10 pixels and click OK.

space evenly, vertically

Hit the space bar to deactivate the text objects. The text is spaced out evenly so it looks like this.

spaced out text

If you want to add the name of your web site to the interface, select one of the text objects, and hit Ctrl+C to copy it into the Clipboard. Hit Ctrl+V to paste it back into the image. Right click, Edit Text, and replace the text with the name of your web site. Drag it down onto the dark gray part at the bottom of the interface.

add the name of your web site

Now let's have some fun slicing this up.

select Slice tool

Note that you should not merge the objects with the base image. On the left side of the work space, find the Slice tool and select it.

Up top in the Attributes toolbar, select "Vertical Line" from the Method dropdown list. Make a vertical slice on each side of the interface. Next, choose"Horizontal Line" from the Method dropdown options.

slice horizontally

Make horizontal slices as shown below, just on the interface. Make sure you don't slice through any text. If you make a mistake, click on the Eraser in the Attributes toolbar, erase the slice line, and try again.

slice up interface and page

When you're done slicing, select the Pick in the Attributes toolbar. Click on the slice with the "Archives" text. You'll see a broken line around the slice, indicating that it is selected. Right click, Script Effects, Pop-up Menu. There are several cool Script Effects, including Blink, Highlight, Rollover and Rainbow Text, and scrolling status bar messages, but in this tutorial we'll focus on the Pop-up Menu.

select Pop-up Menu

When the Pop-up Menu box opens, enter the text, target frame (if desired), URL, Alt text and Status bar message for the first link in the menu. Edit the Font, Font Size, and Normal and Mouseover Background and Text colors. You can also offset the Position of the menu if you wish to do so, but I'm leaving it at the default of 0. Once you've entered all attributes for the first item, click the plus (+) sign and the link will appear under "Menu Item" and "Hyperlink" in the middle of the dialog box.

create pop-up menu items

Don't click OK until you have added all of the other links for this particular menu. Once the items has been added under Menu Item, select and replace the text for the next menu item, then click the plus (+) sign to add it. You won't have to redo anything but the top part, the font, font size, and normal and mouseover colors will "stick." I've added links for my PI6, PI5 and PI4.2 Archives.

add the rest of the menu items

When you've added all your menu items, click OK to close the dialog box. With the Pick, select the Information slice, right click, Script Effects, Pop-up Menu. This time add links for the Information menu. I'm adding only two links here, "FAQ's" and "Resources." Again, the font, font size, and colors at the bottom of the dialog box are "sticky" and will stay as they were for the Archive menu, unless you change them.

add Information menu items

Click OK to close the dialog box. Select each of the three remaining slices with the Pick. Each time a slice is selected,  do right click, Script Effects, Pop-up Menu to add menu items to each slice.

When all of the slices have menu items added, you're ready to preview the Pop-up Menus in your browser. Choose File, Preview in Browser. The interface will open up on a web page. Roll your mouse over each of the slices to view the Pop-up Menus and watch for the rollover color changes. When you're done previewing the interface, close your browser window.

If you saw any mistakes (rollovers don't work, etc.) use the Pick tool to select a slice for editing. If the Slice Panel isn't open, click on "Show/Hide Slice Panel" in the Attributes toolbar (right next to the Add button). Double click "Triggered by cell," then select "Pop-up Menu." Click the "Modify Script Effect" button (arrow) to re-open the Pop-up Menu dialog box.

select slice then edit

Select the desired menu item and then edit it. Note that you can move the menu items up or down in the menu heirarchy, delete menu items or add new ones. Click OK to close the box.

Preview your Pop-up Menu again in your browser to make sure that it works OK. If everything looks good, it's time to save the Pop-up Menu. Choose File, Save for Web, As HTML. Browse to a folder and save the web page. PI7 will automatically make an images subfolder and all of the image slices will be saved to that folder. The sliced images will be named for your web page, so if you name it index.htm, your slices will be named index_1.jpg, index_2.jpg, etc.

Remember when you upload your Pop-up Menu web page, you must upload the images to an images folder on your server. The file structure on your server must match the file structure on your computer exactly, or the Pop-up Menu won't work.

This tutorial uploaded 10/26/01

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



Back to Homepage