Working with image maps (ImageReady)

An image map is an image that contains multiple hypertext links to other files on the Web. Different areas, or hotspots, of the image map link to different files. Adobe ImageReady creates client-side image maps and server-side image maps.

Creating image maps is one of the functions that you must do in Adobe ImageReady. You can use Photoshop to create slices, which share certain functionality with image maps, but you cannot create image maps with Photoshop.

Note

For information about slicing an image into multiple image files and linking each slice to another Web page, see Lesson 15, “Adding Interactive Slices and Rollovers.”


Creating and viewing image maps (ImageReady)

Image maps enable you to link an area of an image to a URL. You can set up multiple linked areas—called image map areas—in an image, with links to text files; other images; audio, video, or multimedia files; other pages in the Web site; or other Web sites. You can also create rollover effects in image map areas.

The main difference between using image maps and using slices to create links is in how the source image is exported as a Web page. Using image maps keeps the exported image intact as a single file, while using slices causes the image to be exported as a separate file. Another difference between image maps and slices is that image maps enable you to link circular, polygonal, or rectangular areas in an image, while slices enable you to link only rectangular areas. If you need to link only rectangular areas, using slices may be preferable to using an image map.

Note

To avoid unexpected results, do not create image map areas in slices that contain URL links—either the image map links or the slice links may be ignored in some browsers.


–From Adobe Photoshop 7.0 online Help


Using layers to create image maps

In this procedure, you’ll create an image map in an existing image. You define hotspots using layers or one of the image-map tools. Then you’ll assign each hotspot to an URL, linking it to a site on either a local computer or the World Wide Web.

You’ll use a version of the zoo-map image that places each colored region on its own layer. You’ll convert each layer to an image-map hotspot. By using layers to define the hotspots, you easily gain control over the shapes of those areas.

1.
In ImageReady, choose File > Open, and open the file 14Start4.psd from the Lessons/Lesson14 folder.

2.
In the Settings menu on the Optimize palette, choose GIF 64 Dithered.

3.
In the Layers palette, select the African Savannah layer.

4.
Choose Layer > New Layer Based Image Map Area.

A ghosted rectangular area surrounded by a red line appears, enclosing the entire African Savannah portion of the image. This red line and ghosting define the hotspot area included in the image map.

5.
In the Animation palette group, click the Image Map tab, and choose Polygon from the Shape pop-up menu. (You can also open the Image Map palette by choosing Window > Show Image Map.)

Now the red outline approximates the shape of the savannah area.

6.
In the Quality option on the Image Map palette, drag the slider or type 90 to make the red line more closely conform to the savannah area shape.

Now that you’ve defined the hotspot area, you can link it to another file in your Web site or to a different location on the Web. For the purposes of this lesson, you’ll link your hotspots to fictitious URLs for the zoo.

7.
In the URL option in the Image Map palette, type the fictitious address of a Web site, http://www.adobe.com/african_savannah.html, in the URL text box.

In the Layers palette, a pointing-finger icon now appears on the African Savannah layer, indicating that the layer has a layer-based image map.

Note

If you prefer, you can use other URLs for this exercise, linking the hotspots to your own local intranet pages or to some of your favorite sites on the World Wide Web.

8.
(Optional) For more practice with image maps, select the other four areas of the zoo map (Exotic Asia, Tropical Rainforest, Himalayan Highlands, and Northern Wilderness) and, one layer at a time, repeat steps 3 through 7 to create more layer-based image maps. Use the same settings, but change the “african_savannah” part of the URLs, replacing it with the name of the layer used to create the image map.

Don’t worry now about any mistakes you might make when you type in your URLs. You’ll learn how to edit image-map information later, in “Creating the HTML file and editing image-map information” on page 447.

9.
Choose File > Save.

Adjusting the cross-platform gamma range

Before you take your final steps to publish your image-mapped illustration of the zoo image on your network or the Web, you’ll verify whether or not the brightness of your image is compatible across monitors on different platforms. Machines running Windows generally display a darker midtone brightness, or gamma, than Macintosh machines.

Note

Before starting this part of the lesson, be sure to calibrate your monitor so that it displays color accurately. For information, see Lesson 17, “Setting Up Your Monitor for Color Management.”


1.
In the ImageReady toolbox, click the Toggle Image Maps Visibility button () to hide the polygon boundary lines of the image-map areas.

2.
Choose View > Preview > and then choose a command as follows, to preview the image as it will appear on the platform you’re not using:

  • If you are working in Windows, choose Standard Macintosh Color.

  • If you are working in Mac OS, choose Standard Windows Color.

3.
Choose Image > Adjustments > Gamma.

4.
Click the appropriate button:

  • If you are working in Windows, click Windows to Macintosh, and then click OK.

  • If you are working in Mac OS, click Macintosh to Windows, and then click OK.

5.
Choose File > Save Optimized As.

6.
In the Save Optimized As dialog box, choose Images Only from the Format menu, use the default name 14Start4.gif, and click Save.

Now you’ll preview your image map in a Web browser.

7.
Choose File > Preview In, and choose a browser application from the submenu.

8.
In the browser window, move the pointer over the different zoo regions, and notice that these elements contain hypertext links. If you had a modem and an Internet connection and if these were authentic URLs, you could click the hotspots to jump to the specified page of the zoo site.

9.
Quit your browser to return to Adobe ImageReady.

Creating the HTML file and editing image-map information

When you save an image map in an HTML file, the basic HTML tags needed to display the image on a Web page are generated automatically. The easiest way to do this is simply to choose the HTML and Images Format option when you save the optimized image.

Once you have created the HTML file, it can easily be updated to reflect any changes, such as new or modified image-map areas or URLs.

1.
In ImageReady, choose File > Save Optimized As.

Note

In Photoshop, you create an HTML file in the Save Optimized As dialog box that appears after optimizing the image and clicking OK in the Save For Web dialog box.

2.
In the Save Optimized As dialog box, select the HTML and Images option on the Save As Type pop-up menu (Windows) or the Format menu (Mac OS). Use the default name 14Start4.html, and save the file in your Lessons/Lesson14 folder.

If the Replace Files dialog box appears, click Replace.

When you select the HTML and Images option, an HTML page containing the image is saved automatically, in addition to the graphic file. This HTML file will have the same name as the image, but with the .html extension.

Now you’ll use ImageReady to change one of the URL links and update the HTML file.

3.
In the toolbox, select the image map select tool (), hidden under the rectangle image map tool ().

4.
In the image window, click to select the African Savannah image-map area.

5.
In the Image Map palette, change the URL to http://www.adobe.com/newafrica.html.

If you have other image-map information that you want to edit, use the image map select tool to select the image-map areas that you want to update, and then enter your changes in the Image Map palette options.

6.
When you finish making changes, choose File > Update HTML.

7.
In the Update HTML dialog box, select the 14Start4.html file, and click Open. Then click Replace when the Replace Files dialog box appears and click OK to dismiss the update message.

8.
Choose File > Close to close the image. Don’t save changes, if prompted.

You can use your Web browser to open and view 14Start4.html. You can also open the file in a text editor, or a word-processing or HTML editing program to make your own revisions to the HTML code

For the Web: HTML File-Naming Conventions

Use the UNIX® file-naming convention, because many network programs truncate (shorten) long filenames. This convention requires a filename of up to eight characters, followed by an extension. Use the .html or .htm extension.

Do not use special characters such as question marks (?) or asterisks (*), or spaces between the letters in your filename—some browsers may not recognize the pathname. If you must use special characters or spaces in the filename, check with an HTML editing guide for the correct code to use. For example, to create spaces between letters you will need to replace the space with “%20”.


..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.15.187.101