Creating images for the Web : Mapping images
 
Mapping images
An image map is a graphic that contains a mapped area (called a region or hotspot), that links to a URL. The cell can be a circle, rectangle, or irregular shape. When you move the mouse over the cell, the cursor changes to a hand indicating that you can click that area to jump to another Web page.
Creating map areas
You create and edit image map areas with the tools in the Tools group box of the Image Mapper dialog box.
 
Tool
Description
The Arrow tool lets you modify a hotspot area.
The Mover tool lets you move a hotspot area.
The Polygon tool lets you create an irregular-shaped hotspot area.
The Rectangle tool lets you create a square or rectangular hotspot area.
The Circle tool lets you create a circular or elliptical hotspot area.
The Delete tool lets you delete a hotspot area.
The Pan tool lets you drag the image in the preview to view hidden areas of the image.
Assigning map area properties
After you have created the map areas (or regions), you can assign URLs, alternate text, and targets.
Saving image maps
You can save image maps to a folder on your hard drive so you can use or edit them. You can also save map settings to the Clipboard and then paste them into the HTML code. When you save the map settings, you save the map area arrangement and the information you typed in the Image Mapper dialog box. You can then reload them into the same image, or use the settings with a different image.
Setting map preferences
After you have created the map areas (or regions), you can assign URLs, alternate text, and targets.
To create and save a map area
Edit workspace 
1 Choose File Export Image Mapper.
The Image Mapper dialog box appears.
2 Choose one of the following tools and draw in the preview area to create a hotspot:
• Rectangle tool — drag the cursor to enclose a square or rectangular-shaped hotspot area
• Circle tool — drag the cursor to enclose a circular or elliptical hotspot area
• Polygon tool — click to set the starting point and continue moving the cursor and clicking to enclose an irregular-shaped hotspot area. Double-click to complete the polygon.
3 In the URL drop-list, type the address of the Web page to which you want to link.
If you want to select addresses already used in the image, click the arrow in the box and select the address you want from the URL drop-list.
If you do not want to link to a Web page, type #.
4 In the Alt text box, type the text that appears if the image does not load or if the user has images disabled in the Web browser.
5 Choose one of the following target frame options from the Target drop-list:
• _blank — loads the linked page in a new browser window
• _parent — loads the linked page in the parent frameset of the link. If the link is not in a nested frame, the image loads in the full browser window.
• _self — loads the linked page in the same frame as the link
• _top — loads the linked page in the full browser window and removes all frames
6 Click Save.
The HTML Save As dialog box appears.
7 Navigate to the folder where you want to save the HTML code, and click Save.
The Image Map Save As dialog box appears.
8 Navigate to the folder where you want to save the image and click Save.
 
You can also
 
Select an existing map area
Click the Arrow tool , and click a map area.
Change the shape or size of a map area
Click the Arrow tool, click the shape to select it, and hover over one of the green points that appear until the cursor changes to a four-point arrow. Drag the point to a new position.
Move the map area
Click the Move tool , click inside the map area, and then drag it to a new position.
Erase a map area
Click the Delete tool and then click inside the map area.
Remove all map areas
Click Clear.
Preview the image map in a Web browser
Click the Preview in browser button and test the map area in the Web browser.
Save map area information to the Clipboard so that you can paste it into the HTML code
Click Save to Clipboard to open the HTML Destination Folder dialog box, navigate to the folder where the HTML file is saved, and click OK to save the slice settings. Then, open the HTML file, place the cursor where you want to insert the HTML slice code, and press Ctrl + V.
Create a rollover for a map area
Click Rollover Creator. For more information about creating image rollovers, see Creating image rollovers.
To set map preferences
Edit workspace 
1 In the Image Mapper dialog box, click Preferences.
The Map Preferences dialog box appears.
2 Click the Active tile border color box, and choose a color.
3 Click the Inactive tile border color box, and choose a color.
4 In the Maximum history list size control, set or type the number of entries listed in the URL and Alt text drop-lists in the Cell Properties group box in the Image Mapper dialog box.
5 Click OK.
To save map settings
Edit workspace 
1 Click Save Settings.
The Save Map Settings dialog box appears.
2 Navigate to the folder in which you want to save the settings file.
3 Type a name for the file and click Save.
The file is saved in the JMD format.
To load map settings
Edit workspace 
1 Open the image in which you want to load map settings.
2 Choose File Export Image Mapper.
The Image Mapper dialog box appears.
3 Click Load Settings.
The Load Map Settings dialog box appears.
4 Navigate to and select the JMD file you want to load.
5 Click Open.