Image Map Navigation

Create image map hot spots in ImageReady to link a single image to multiple pages.

1.	Draw a Tool-Based Hot Spot You'll define each of the button links on this page with image map link regions (hot spots). We made this image in Photoshop, but you'll add the hot spots in ImageReady, because Photoshop doesn't have image map tools. INSIGHT What Is an Image Map? An image map is a single image with multiple links. It's a useful alternative to defining links with slices, particularly if your link regions are distributed around an image (like cities on a country map) or would overlap if defined by rectangular slices. Under the hood of an image map coordinates are "mapped" mathematically on the image so that when mouse travels through a mapped region it is detected and a click will send the viewer to a linked file. Start by drawing a hot spot around the Home button with the Polygon Image Map tool. If that tool isn't showing, press whichever image map tool is displayed in your toolbox and choose the Polygon Image Map tool from the flyout menu A. Zoom in and then click in each corner of the Home button to draw a hot spot in the approximate shape of the button. To close the hot spot border, move toward the starting point until you see a small circle and click B or just double-click. Adjust the Hot Spot Adjust the hot spot to fit the button by clicking on the anchor points with the Image Map Select tool A and dragging B. For more precision, Shift-click to add an anchor point C or Option/Alt-click to delete an anchor point D.    TIP Image Map Tools. The Polygon Image Map tool draws connecting line segments, giving you the most control over the shape of a hot spot. The Rectangle Image Map tool and the Circle Image Map tool draw hot spots in those geometric shapes.
3.	Duplicate a Hot Spot. Repeat Steps 1 and 2 to make another hot spot on the Games button A. With the Image Map Select tool active, click the Image Map palette icon in the Options bar B to open the Image Map Select tool active, click the Image Map Palette icon in the Option bar B to open the Image Map palette (or choose Window>Image Map). From the palette's menu C choose Duplicate Image Map. Alternatively Option/Alt-drag the hot spot to copy it. Drag the new hot spot on top of the Help button D. Make Layer-Based Hot Spots The Tips, D-Loads, and Support buttons were created on separate layer—so you can use a quick, layer-based command to make their hot spots. Select the TipsBtn layer in the Layers palette A. Choose Layer>New Layer Based Image Map Area from the menu bar. By default this makes a rectangular hot spot around the Tips button that doesn't match the shape of this button B. To fix that, in the Image Map palette choose Polygon from the Shape pop-up menu C. Then click the arrow on the Quality field and drag the Quality slider to the right until the hot spot matches the shape of the button D. (We set our Quality field to 100 and got a perfect fit E.) Repeat this step for the D-Loads and Support buttons, each of which is on its own layer too. TIP Fitting Hot Spots. An image map hot spot is an active link area in a viewer's browser. The viewer's main clue to the presence of a hot spot is the underlying graphic (along with a tiny hand icon that appears when he mouses over a hot spot in a browser). It's important that the hot spot fit the underlying graphic as closely as possible so the viewer knows where to click.
5.	Name the Hot Spots Each of your hot spots is listed in the Web Content palette with default names A. Give your hot sports more meaningful names by double-clicking their names in the Web Content palette and typing helpmap, gamesmap, homemap, tipsmap, dloadsmap, and supportmap repectively B. (Or select each hot spot in the Web content palette and name it in the Image Map palette.)   Add Links to the Hot Spots Select the helpmap hot spot in the Web Content palette. In the Image Map palette, type help.html in the URL field. Repeat this step for each of the other hot spots, typing index.html (for the home button), games.html, tips.html, dloads.html and support.html, respectively. INSIGHT Relative Links. We recommend assigning relative links when you're linking to files within the same Web site, so that the site can be moved without the links breaking. Relative links are relative to the location of the current page. So to use them you have to plan in advance how you're going to structure your site files. For example, the relative link from the helpmap hot spot on the current page to the help.html page would be: help.html if the help page is in the same folder as the current page; /helpfiles/help.html if the help page is in a folder called helpfiles that's one level down from the current page; ../help.html if the help page is one level up from the current page; ../games/help.html if the help page is in a folder called games that's one level up from the current page. Absolute Links. Absolute links are best when you're linking to an external site. They are links that include the complete path to a site file. For example, http://www.flightgames.com/help.html includes: the Internet protocol (http://). the site domain (www.flightgames.com). the page name (help.html). Each of these is a relative link, which means that its path is relative to this image map page. The relative link help.html, for example, assumes that the help page will be in the same folder with this page on a Web server. (See the sidebar for more about relative links.) If you don't yet know what your Web site's file structure will be, you can leave this field blank and use a WYSIWYG site-building program like GoLive or Dreamweaver to make relative links for you later.
7.	Make a Rollover in the Image Map You can include rollovers in image maps. When you add a rollover to an image map hot spot, a slice is created behind the scenes. Select the Rectangle Image Map tool in the toolbox A, and drag a rectangular hot spot around the FGI logo in the image B. Then click the Create Rollover State icon at the bottom of the Web Content palette C to create an Over state in the hot spot D. To change the appearance of the FGI logo in the Over state of the rollover, click the f icon at the bottom of the Layers palette E and choose Outer Glow from the Layer Effects pop-up menu. Click OK in the Layer Style dialog box to accept the default options for this layer effect. Click the Image Map Visibility button in the toolbox F and then the Preview button G and mouse over the logo to preview the rollover. Click the Preview button again to exit Preview mode. Add a Remote Rollover You can even include a remote rollover in an image map. In the Web Content palette, double-click the name of the new image map and rename it FGImap A. Select the Over state of FGImap in the Web Content palette B. In the Layers palette, click in the Visibility field of the Flight Games Inc. layer to display an Eye icon C. This makes the Flight Games Inc. text visible on the Over state of the FGImap rollover. Preview in a Web Browser Click the Preview in Browser button in the toolbox A to test the rollovers in a Web browser. When you mouse over the FGI logo in the browser, a glow appears around that logo, and the Flight Games Inc. appears in the image B. Save We already optimized this image as a JPEG. These optimization settings apply to the entire image map and its rollovers. Choose File>Save Optimized As, and in the dialog box that appears choose Format: HTML and Images A, make a destination folder, and click Save B to save imap.html with the image map data and rollover JavaScript, along with a folder of images. Choose File>Save to resave the PSD file with all of its image map, slice, and rollover information. Congratulations on completing this chapter on navigation. In the next chapter you'll learn how to make amazing animations in ImageReady

In this tutorial:

1. Creating Stylish, User-Friendly Navigation
2. Critical Skills
3. Rollovers
4. Image Maps 
5. Starting New File for Web 
6. Building Navigation Bar 
7. JPEG Optimization Settings 
8. GIF Optimization Settings
9. Slicing and Optimizing Navigation Bar
10. Slice Options
11. Transparent Buttons 
12. Rollover Navigation 
13. Pointers and Remote Rollovers 
14. Image Map Navigation