Task 8 How to Build Imagemaps

Imagemaps enable you to create hot spots in web images that link to other pages, actions, or information. You could create a graphic with buttons, elaborate text treatments, or image-based information, designating the exact areas within the image for the links. ImageReady lets you easily designate areas for imagemaps, allowing you to specify the link information and even save the necessary HTML code to finish the effect.

1. Open the File in ImageReady

In ImageReady, select File, Open and select the desired image file. In this image, I will draw imagemap areas around each line of text, which will link to the respective pages in a website.

2. Select the Image Map Tool

Click and hold the Image Map tool in the toolbox to display all the ImageMap tools in a pop-out menu. The tool options enable you to draw rectangles, circles, and polygonal shapes. There is also a tool for selecting the imagemap shapes after they're drawn. Select the desired shape tool from the menu.

3. Draw the Imagemap Shapes

Move the mouse pointer over the image and click and drag to draw the shapeit appears outlined with handles on each side. To edit the shape after it is drawn, select the Image Map Select tool, select the imagemap shape, and move the handles as desired toresize.

4. Open the Image Map Palette

If it's not open already, select Window, Image Map to open the Image Map palette. Adjust the X and Y settings in the Dimensions section to control the exact placement control (depending on the shape type you selected in step 2) to resize the shape.

5. Set HTML Information

Enter a unique name for the imagemap shape you just drew, as well as the target URL for the link. After entering a URL, you can select a target value to control the kind of window in which the link will open. Select Blank for a new window or Self for the current window (the Parent and Top options are used primarily for frameset targeting). If desired, enter an Alt value, which appears if someone views the page with the graphics off.

6. Save the Files

To save the image and the HTML parameters, you must save a graphic file and an HTML file. To do this, optimize the file as explained in Task 2, "How to Build GIF Files for the Web," and then select File, Save Optimized. In the Save As Type menu (the Format on the Mac), make sure that HTML and Images is selected and that the files are in the desired directory. Click Save to save the image and HTML files.

How-To Hints

Aligning Shapes

When working with multiple imagemap shapes, use ImageReady's precision alignment tools to center the shapes or align them along an edge. Select the ImageMap Select tool and hold down the Shift key to select multiple shapes. You can then select from any of the align or distribute tools that appear in the Options bar.

Imagemaps from Layers

If you have a shape isolated on its own layer (such as a graphic button), select Layer, New Layer Based Image Map Area. This option creates a new imagemap shape based on the currently active layer.