| Image Mapping
Image Mapping is a common method for creating visually interesting navigation matrixes for your Web sites. These image maps define a set of coordinates for each hotspot associated with a portion of an image which people viewing your web page click to take them to new pages.
|
To create image maps:
- Open your image in SmartSaver Pro (or, if continue using the image you worked on in the last lesson) and click the Image Map tab [F6].
If you're working on an image you've already sliced, then the guidelines drawn in Slicer mode are visible for reference in Image Map mode. The default reference color is light gray, but you can change this in Preferences: Slicer. In the screen shot to the right, I'm using dark purple to make it stand out more.
- Select a tool for creating hotspots. In my Traveler's Guide image, I'll use the Rectangle tool (located on the Tools toolbar below the Slicer tools) to map the region immediately around the text. However, if I were going to map the contours of the mountains (say, for example, the high peak in the middle background) then I'd use the Polygon tool - it lets you draw freehand and allows you to create any shape imaginable.
Once you've drawn your shape, you can resize it by dragging any of the handles in the bounding box with your mouse cursor.
- On the Properties panel, enter in the hotspot information, such as destination URL and target frame (if any) as well as Alt text.
- Click the File: Save Optimized Image menu command to save your image (or images, if sliced) and its corresponding HTML. All of the image map code is contained within the *.htm file generated by SmartSaver Pro. To utilize it, simply open in it in your favorite HTML editor, copy all of the relevant code (don't forget all of the <map> tags!) and then paste it into your web page. You may have to move the images to the same folder as your web page or redirect the <img src> links to their proper location.
|
 
|
|
