PI5 Image Map

The Image Map Assistant makes it easy to put a clickable image map on your web site. Just make selections, on the image map, convert them to objects (or start out with your own objects), and assign URL's and Alt text. Then Export the image map code to an HTML page for later use. 

This tutorial shows how to use both methods of using the Image Map Assistant on the image map shown below for the fictitious Cypress Hammock State Park. Right click and save it to follow along, or use one of your own graphics to create an image map. 

image map

View image map page

What we'll do is create a clickable "hot spot" for each of the main sections of the park's site: Campgrounds, Biking, Fishing & Boating, Nature Center and Easy Walks.

Since the clickable areas will be all different shapes, we'll need to vary the Selection tool attributes for each one. To select the Campgrounds area, choose the Selection tool. In the Attributes toolbar, make sure that the Mode is "Make a new selection." This is really important, because if you'll be making other selections in this image, and you want each selection that you make to be unique.  Select Ellipse from the Shape dropdown list. Make a selection that includes as much of the Campgrounds section as you can, without overlapping the Fishing & Boating section. Right click on the selection and choose "Convert to object."

make ellipse selection

Next let's select the Nature Center hot spot. In the Attributes toolbar, choose Rectangle from the Shape dropdown list. Make a selection of the wood stork. Be careful not to select any of the tent from the Campgrounds section, or any of the bass from the Fishing & Boating section. Right click on the selection and "Convert to Object."

make second hot spot

To select the big mouth bass for the Fishing & Boating hot spot, choose the Lasso selection tool. Click once to start the selection, then drag carefully around the entire fish, a few pixels out from the edges. You must double click to close the selection. Right click on the selection and "Convert to Object."

Lasso selection for Fishing & Boating hot spot

Return to the Standard selection tool, with Ellipse chosen from the Shape dropdown list. Make an elliptical selection of the water lily image for the Easy Walks section. Right click on the selection and "Convert to Object."

Easy Walks hot spot

Finally, change to Rectangle from the Shape dropdown list and select the couple on bikes. Right click on the selection and "Convert to Object."

Biking hot spot

Now you have 5 selections that have been converted to objects on the image map. Click on one to make it active. Hold down on the Shift key while clicking the other 4 objects, so that all of the objects are active at the same time.

Choose Web, Image Map Assistant. When the dialog box opens, you'll see the image map. Click on the Campgrounds object.

Image Map Assistant dialog box

Note that the Campgrounds object is "Obj-1" (arrow, 1). In the Optimizer section, select GIF (arrow, 2), and choose GIF Optimized 256 Colors from the associated dropdown list. In the Type section, leave the default of Automatic (arrow, 3) selected. Since we want this hot spot to link to a specific page, for URL enter campgrounds.htm, and for Alt text enter Campgrounds. If you'll be using frames, enter a target frame as well. Note that the Position coordinates of the hot spot within the base image are shown under Position, along with its Width and Height. 

Next, click on the Nature Center object. Enter a URL of nature.htm and Alt text of Nature Center. 

Click on the Fishing & Boating object. Enter a URL of fishing.htm and Alt text of Fishing & Boating.

Click on the Easy Walks object. Enter a URL of walks.htm and Alt text of Easy Walks.

Click on the Biking object. Enter a URL of bikes.htm and Alt text of Biking.

Now that you've entered URL's and Alt text for all 5 hot spots, click on the Browser Preview button to view the image map in your default browser. As you roll your cursor over each hot spot, a little popup box with the Alt text should appear, and you should see the URL for the hot spot in your task bar. Close the browser after previewing, and return to the dialog box. 

To save the image map, click the Export button. Doing so opens the Save As dialog box, from which you'll save the image map as an HTML page. Name the document (e.g., statepark.htm) and click Save. Note that by saving the HTML document, PI will automatically create an images folder, and save the image map graphic in this folder as statepark.gif. 

Open up the image map document in your HTML editor. If all you're going to have on this web page is the image map, your work is done. Add whatever text you wish to have on the page, and Save it. Alternatively, copy the image map code into the Clipboard and paste it into another web page document.

When you upload your page to the server, be sure to upload statepark.gif to your images folder. If you don't have an images folder, make one and upload the image for the image map to that folder.

View image map page

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



Back to Homepage