EZ Image Map in PI8 |
|
This tutorial contains instructions to produce a simple image map which links the viewer to other web pages by clicking on a portion of the image. If you're interested in creating a more complex web interface with rollover buttons, check out my Panic Button Rollover Interface tutorial.
Version: 8 (Lower versions also have an Image Map feature under "Web", but the interface is slightly different.)
User Level: Intermediate. Some HTML skills required to incorporate the image map in a web page.
You will need: Any image file.
|
- Open the image file in PI.
- Select the Image Map tool.
- Using the shapes on the Image Map toolbar, select each area to which you wish to link.
- You can drag and draw either standard circular or rectangular cell shapes by selecting the Circle or Rectangle tool from the toolbar. You can also use the Polygon tool to create irregular cell shapes by clicking around the perimeter of the area.
- The size of the cell can be adjusted by using the handles on the black frame of the cell, much like PI's Transform Tool.
- To hide the cells, select a tool other than the Image Map Tool, then press SHIFT+F8 or click on the Show/Hide Image Map button immediately below the Image Map Tool button.
|
 |
- Enter the link information in the URL space of the Image Map Panel for each link. You can also select an option for opening the link in another browser, an alternate text message, and a message to be displayed the browser's status bar when the cell is activated.
- When you're satisfied with your image map, save it as a HTML file using "File>Save for Web>As HTML...".
- To incorporate your image map in a web page created in an editor other than PI, simply open the HTML file in your HTML editor and copy the table containing the image map code, then paste into your web page code in the position where you want the image map to appear. If editing in PI, simply build the image map in place on your page.
- When uploading the HTML file to your web space, the "Images" folder created when you saved the image map HTML must be uploaded to the same web folder as your web page HTML file.
|
 |
|
|