Image Maps  take a different approach to Navigation Bar s.  Rather than Slicing up the image into a Table, you save only one complete image and assign links to particular areas of the image.  An Image Map is a set of co-ordinates applied to an image that define a link.  Individual links, or Hotspots as they are sometimes called, can be rectangular, circular, or polygonal in shape.  Rollovers and animation are not possible when using the Image Map method.

Select File/Save As and save “navbar” as “map” in Photoshop  format.  Delete all Slices  and Rollover States so that only the default Slice surrounds the image.

Creating Image Maps   
To create Image Maps  with ImageReady you use the Image Map Tools in conjunction with the Image Map Palette .  Alternately you can use the Menu  to apply Image Maps directly to a Layer .  We’ll try both methods. {Click} and hold on the Image Map Tool icon in ImageReady’s Toolbox  to check your options.

Image Map Tools 

The Image Map Toolset allows the designer to employ and select, rectangular, circular, and polygonal Hotspots.  Select the Rectangular Image Map Tool and use it to draw a Hotspot  over the Trip button.  Notice that the process of drawing an Image Map is not unlike that of creating a series of Shapes.   Simply {Click} and drag your mouse cursor to place the Image Map in your document.  Create Rectangular Slices  over all 3 of the buttons in the Nav Bar.  Note that a selected Image Map has a red outline that’s somewhat similar to a transformation bounding box.  An unselected Image Map has a light blue outline.

Select and Unselected Image Maps

You have two options if you’d like to adjust the positioning or size of your Image Map.  Use the Image Map Select Tool  to select the Image Map and modify it by adjusting the red squares on the corners and sides.  Alternately you can use the Image Map Palette  to adjust dimensions and positioning by adjusting the figures in the fields on its left hand side.  Use the X and Y fields to move the Map around your Image Window  and the W and H (R for Circle Image Map) to change its shape.

The Image Map Palette

Check the additional options on the right hand side of the palette.  The name of the currently selected map, in this case “ImageMap_03” appears in the Name field.   The URL field allows you to attach a link to your Hotspot .  If your Link is going to target a Frame in a Frameset then you can select or input that style of link in the Target drop-down menu.  If you’d like to add an “Alt” tag to your link you can do so with the Alt field at the bottom right of the Palette.

Image Maps  and the Layer Menu
Use the Layer  Menu  to draw your Hotspots if you want a quick and easy alternative to the Image Map Tools.  Select any one of the three shape Layers  in the Layers Palette  and select Layer/New Layer  Based Image Map Area from the Menu.  ImageReady will insert a rectangular Hotspot  into your document that fits your button perfectly.   If you wish you can convert the Hotspot into a circle or polygon by selecting those options from the Shape  drop-down menu on the left hand side of the Image Map Palette .  If you apply a URL to any Image Map created in this manner you will see it listed in the Layers Palette underneath the Label for the subject Layer.   If you move any shape that has had an Image Map applied to it in this manner you’ll find that the Hotspot moves with it.

Image Map URL listed in the Layer ’s Palette

We’ll use this Layer  Menu  method to apply a Hotspot  to each of the shape Layers  in our Navigation Bar .  Link each Hotspot to http://www.adobe.com.

Select File/Save to save the Photoshop  version of the file.  Select File/Save Optimized  As to save the Optimized version with the HTML file containing the Image Map.  Load “map.html” into a web browser and examine the HTML code.