| |
Making Image Maps - Corel Paint Shop Pro 7 Tutorial
| by Jed Clampett
Image maps are photos, drawings or designs that contain areas hot spots which contain URL links to go to another Web page. Image maps come in handy when you dont want to slice an image but you still want more than one URL link or rollover in the image. To make an image map, follow these steps: | 1 | | 1. Open the image you want to make into an image map and select it. You can use this image if you'd like. | | 2 | | 2. Choose File|Export|Image Mapper. |
| 3 | | Above the eye icon is a cross, click, hold and move the rectangle to the area of the image you want to start mapping. I moved it to company on the sample image map file. | | 4 | | Across the left top of the Image Mapper dialog box you will see a row of tools. Choose the shape you need for your map, if you are using the sample choose the Rectangle tool and draw around the word Company. If you use the Circle tool, it draws from the center out. The Polygon tool uses a point to point type of drawing to outline the shape you want. If you decide you dont like the shape you drew, select the Delete tool (looks like and eraser) and click on the shape. Or you could press the Clear button on the bottom of the dialog box if you want to clear everything. Note: You can resize your selection by using the Arrow tool and moving one of the points. You can move the whole selection by using the Mover tool. | | 5 | | Repeat step 4 for the rest of the words or shapes. | | 6 | | Select the first map area (Company in this example) by selecting inside of the shape with the Arrow tool. If you look below the Tools section on the left side of the Image Mapper dialog box you will see the next section called Object Properties. At the bottom of this area where you see Left, Right, Top, and Bottom which is the map coordinates of this area. | | 7 | | In the Object Properties area type in a URL link for the first map area. Then add the Alt text (alternate text). You should use alternate text in your image maps to get the cursor tip when the user passes over the image as well as for those who may browse with images off. If you are using a target area (when using a Web page with frames), enter that as well. Youll look at the rest of the options in the Image Mapper in the following sections, so dont close it yet. Note: If you have other URLs in the image their URLs will be shown in the drop-down list of the URL box. | | 8 | | You can preview your map in a browser at any time by clicking the Eye icon below the image preview area. In most other dialog boxes within Paint Shop Pro, the eye icon shows a preview of your image within Paint Shop Pro, but with this dialog box the preview icon (eye) will open the browser. | | 9 | | Depending on the color of your image, you may want to change the color of the map outlines. Click on the Preferences button on the bottom of the dialog box. The Map Preferences dialog box opens (Figure 5.3). You can change the color of the Active map border and the Inactive map border as well as the size of the History list. The History list is the list of URLs available in the URL drop-down. Note: If you previewed the image map sample file you may have noticed something strange. The black text previews as White. If this happens, click on the Optimize Image button and be sure the transparency is set to None or to your background color. When I tested it was set to black. |  | 10 | | When you are all done with your map settings you can export by choosing from the Format drop-down menu, GIF, JPEG, or PNG then click on the Optimize Cell button. The same optimization options will open that you find in the File|Export|GIF etc. Optimizers. If you think you may want to use these settings again for the same image or for other images, you have the option of saving the settings. To do this, click on the Save Settings button, name the file and save in the location of your choice. When you want to use the settings again, click on the Load Settings button and select the file from where you saved it. The saved map settings file extension is JMD.
| Copyright 2001, Jed Clampett All Rights Reserved |
|