Photoshop CS Timesaving Techniques For Dummies [Electronic resources] نسخه متنی

Using Tools to Map Hotspots

Creating an image map with the tools supplied by ImageReady is really quite simple. The Rectangle Image Map and Circle Image Map tools work just like the marquee selection tools in Photoshop. And the Polygon Image Map tool works in a fashion similar to the Pen Tool — just click to create the hotspot boundary.

Here’s the lowdown on designating hotspots by hand:

Select either the Rectangle Image Map, Circle Image Map, or Polygon Image Map tool from the Toolbox.





Create the hotspot around the area.

If you selected the Rectangle Image Map tool or Circle Image Map tool, click and drag a rectangular or circular area in the image window.

If you selected the Polygon Image Map tool, click where you want the hotspot boundary to start, and then continue clicking around the contour of the area. When the area is surrounded, double-click to close the image map, or click the starting point to close the boundary.

Figure 58-1 shows the Polygon Image Map tool in action, creating an irregularly shaped hotspot around the middle fish.





Figure 58-1: Use the image map tools to create hotspots around Web page elements. In this figure, the middle fish has been mapped.






In the Image Map palette, enter a Web address in the URL text box, as shown in Figure 58-2.




Figure 58-2: Enter the Web address in the URL text box.


When you enter the Web address, be sure to type http:// before the Web address. Also, enter the alternate text in the Alt text box. This text appears when someone browsing the Web page passes the mouse over the hotspot. It also appears as a placeholder while the viewer waits for graphics to load.





Repeat Steps 1 through 3 to create another image map hotspot.

If you preview the image in a browser by clicking the Preview in Browser button in the Toolbox, you can test the image hotspots that you’ve created.

You can also optimize and save the image with its image map as described in Technique 57. Be sure to upload the image and associated HTML file that ImageReady generates to your Web service provider. Without the HTML file, your image doesn’t have an image map.