PI7 Image Map

It's easier than ever before to make an image map in PI7. You don't even have to turn selections into objects, like you used to have to in previous versions of PI. This tutorial takes a complex graphic for a fictitious digital country clipart magazine (I've always wished someone would write one!) and turns various pieces of the image into clickable hot links to different URL's. You can view the finished image map here.

tutorial turns this into an image map

To create an image map, select the Image Map tool. In the Attributes toolbar, select the Rectangle shape to make a rectangular selection. Note that you can also make round and polygonal (freeform) selections too.

select image map tool and retangle shape

The Image Map Panel should pop open when you select the Image Map tool. If it doesn't, click Panel in the Attributes toolbar to make it open.

Make a selection over the area of your graphic that you want to turn into a link. The shape will fill with transparent color and be surrounded by a bounding box with resizable control handles. To resize the selection area, select the Image Map's Pick tool from the Attributes toolbar to drag on any control handle. In the Image Map Panel's Properties tab, enter a URL, Alt text and Status bar text.

make a selection

Here's something really nifty that you can do with the Image Map Panel -- click the Script Effects tab and select "Triggered by Cell." Click the plus (+) sign button to add a Pop-Up Menu or Swap Image effect. That's a little too complex for what I'm going to do with this image map, but it's good to know that capability is there. The HTML tab gives you the coordinates for this part of the image map. You can't edit that, but you could select it and copy it into your Clipboard if you wanted to.

Continue making selections on the image and specifying a URL, Alt text and Status bar text for each clickable region of the image map. I've made the little spool of thread with @ sign on it into a link to open a new email message window.

give URL for each link

The final step is to make sure that you've specified web attributes for the web page. Choose Web, Web Properties. Go through the tabs and fill in the necessary information. For example, give the web page a name, list the author, and give key words, description, etc. from the Web Properties dialog box's General tab. The Image File tab is particularly important because you can select the image file type and compression value for the images. I'm saving this image map as a GIF Optimized 256.

When you're done setting all of the Web Properties for the page, choose File, Preview in Browser. Make sure that you can see the Alt text and Status bar text and that everything looks good. If you scroll all the way down the page, you'll see the file size of the page. This one is 114 kb, not too bad for an image this large. The HTML code for the page appears also.

web page information, file size, etc.

To save this image map, select File, Save for Web, As HTML. When the Save As dialog box opens, give the image map page a name and save it to a folder on your hard drive. When you click Save, the HTML page will be saved to the designated folder, and an images subfolder will be created automatically. All of the images in the web page will be saved to this images folder. When you upload the web page to your server, make sure that the file structure on your server mirrors your computer's file structure exactly. You must upload your images into an images directory on your server, or the page will not display properly.

Your can view my image map page here.

This tutorial uploaded 6/14/02

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



Back to Homepage