Using the Image Mapper

[ LiB ]

Using the Image Mapper

Paint Shop Pro has a built-in image-mapping utility, the Image Mapper (Figure 9.18).

Figure 9.18. Using the Image Mapper.

graphic/09fig18.gif


To run the Image Mapper, choose F ile > Expor t > Image M apper. You then see the Image Mapper dialog box, which has several tools. Three are area-defining tools (Polygon, Rectangle, Circle), enabling you to define clickable areas for the image. Three others (Mover, Eraser, Arrow) allow you to modify and/or select your clickable areas. Following are descriptions of the seven tools you can use for image mapping:

  • Arrow tool. Use the Arrow tool to resize the areas you've defined (and, in the case of polygons, to reshape the areas). The Arrow tool is also used to select a clickable area that you've defined. Once you select an area, you can enter the appropriate URL for that area, along with a value for the ALT attribute and a value for TARGET , if you like.

  • Mover tool. Use the Mover tool to move an area by dragging the area in the preview window.

  • Polygon tool. With the Polygon tool, define a clickable area by clicking with the tool in the preview window and dragging to form a straight line. Click again when you reach the end of the line segment you want to make, and then continue clicking and dragging to make the other line segments for your polygonal area. To close the polygon, click on the starting point or simply right-click anywhere in the preview window.

  • Rectangle tool. Define a rectangular area by dragging in the preview window with the Rectangle tool. The Rectangle tool draws from one corner of the rectangle to the diagonally opposite corner.

  • Circle tool. Define a circular area by dragging with the Circle tool. The Circle tool draws from the center of the circle out.

  • Eraser. Click an area with the Eraser to remove that area. (To remove all of the clickable areas you've defined, just click the Clear button.)

  • Pan tool. The Pan tool, which looks like a hand, lets you move the preview image around in the preview window. Simply select the Pan tool and drag in the preview window.

To optimize your image map, choose a file format in the Format section of the dialog box and then click the Optimize Image button.

NOTE

graphic/p1.gif TIP

If you want to save your settings for later use on the same image or on another image, press the Save Settings button. To load previously saved settings, press the Load Settings button.

To save the HTML code for your image map, press the Save or Save As button to call up the HTML Save As dialog box. In that dialog box, enter a name for the HTML file that contains the code for your image map. Click the Save button in the HTML Save As dialog box, which saves the HTML file and opens the Image Map Save As dialog box. Navigate to the file folder that you want, and enter the name for the optimized image map image.

To include the image map on your own Web page, copy the map code from the HTML file that Image Mapper created and paste it into the HTML file for your Web page. (Alternatively, instead of Save or Save As , you can choose Save To Clipboard and then just paste your saved code into your HTML file from the Clipboard.) After adding your new code, upload your newly edited HTML file for your page, along with the optimized image map image, to the proper folder(s) on your Web server.

NOTE

graphic/p2.gif NOTE

In addition to creating simple image maps, you can create JavaScript rollovers for your image map. Rollovers, which can also be created for sliced images, are discussed later in this chapter.

[ LiB ]


Paint Shop Pro 8 Power
Paint Shop Pro 8 Power!
ISBN: B001QCXEI6
EAN: N/A
Year: 2006
Pages: 125
Authors: Lori J. Davis

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net