| By definition, all of your exported graphics are rectangular. If you make a graphic a link, then the shape of the link is rectangular as well. You can make a portion of a graphic transparent, or make its background color the same color as the background color of the Web page, giving the illusion of a different shape, but you will still have a rectangle. If you want to make a link area a shape other than a rectangle, or if you want to create several links on one image, then you have to use an image map. For example, suppose you have a map of the world, and you want a link for each country. Most countries have irregular shapes, and none are neatly ordered side by side. You need to distinguish the different shapes of each country and then assign a different link to each shape. This is what an image map does. The link areas on an image map are referred to as hotspots in Fireworks. A hotspot area on a graphic can be one of three shapes: a rectangle, a circle, or a polygon. The hotspot is an area that is translated to an image map when you export your page to HTML; it is not part of the graphic. The next exercise shows you how to create the hotspots on an image and then assign links to the hotspots. Although it is easy to create image maps in an HTML editor such as Macromedia Dreamweaver, Macromedia Fireworks can accomplish the same task for you. It is much easier to create complex hotspots in Fireworks because the shape of a vector object can be used to generate a polygon hotspot. The resulting HTML can then be pasted into your Web page or inserted into your Dreamweaver project. 1. | Open the banner.png file located in the Start folder of the Lesson07 folder.
For this exercise, you want to assign a link to the Web page within a banner and a link to the monthly special.
 | 2. | Select the Rectangle Hotspot tool from the Tools panel and draw a rectangle around the Web address. A blue translucent rectangular area (the hotspot) appears.
The size of the hotspot rectangle determines where the user must click to select the link. If you are designing a site for small children, you want the hotspot area large enough for unsteady hands to select. In this exercise, you want the hotspot to cover the text.
 After you draw the rectangle, you may need to change its size or move it on the canvas. Make sure that you switch to the Pointer tool to make any changes to the hotspot.
You'll notice a small white marker in the middle of your hotspot area. This marker (called the behavior handle) is for adding behaviors to the hotspot. You'll use this later in the lesson.
| 3. | Hold down the Hotspot tool to access the Circle Hotspot tool, and then draw a circle around the candy.
The hotspot tools work like other vector tools. To draw from the center, hold down Alt (PC) or Option (Mac) as you draw with the tool.
Tip You do not need to hold down the Shift key as you draw a circle with the Circle Hotspot tool; it always draws a circle. | 4. | Use the Polygon Hotspot tool to draw a shape around the candy stick.
The Polygon Hotspot tool works differently than the other tools. Instead of clicking and dragging to draw the shape, just click around the shape. Each time you click, a point on the hotspot is created. Continue to click until you have a hotspot that roughly outlines the area.
After the third point is added, the hotspot area begins to form. Continue to click around the shape. You can add as many points as you want; the more points, the closer the hotspot comes to defining the shape. A point to remember is that your users generally will click on or around the text description within the shape, so your hotspot area just needs to cover most of the area.
 Tip When drawing your hotspots, make sure you don't overlap an existing hotspot. If you do, the topmost hotspot takes precedence. | 5. | Select each hotspot with the Pointer tool. In the Link text box in the Property inspector, type http://www.sweet-creations.biz/home.htm for the Web address, http://www.sweet-creations.biz/specials for the candy stick, and http://www.sweet-creations.biz/candy for the candy.
Once you have the hotspots on the image, you need to assign a link for each of them. In the Property inspector, you assign the link, Alt text, and a target for the link. (The target generally applies to pages built with frames. You do not need to set it for this exercise.) You can also change the color of the hotspot using the color box in the Property inspector.
The Alt text appears in the browser when the user rolls over the hotspot area. Adding some descriptive text helps users determine whether they want to link to that page. This feature may not be supported in earlier browsers, but it is a good idea to add Alt text to all of your links.
| 6. | For this exercise, add some descriptive text in the Alt text box for each hotspot. For example, type Sweet Creations Home for the Web address, Internet Special for the candy stick, and Sweet Deals for the candy.
Tip You can change the shape of the hotspot using the Shape pop-up menu in the Property inspector. If you change the shape, you may need to resize or move the hotspot to cover the area.  | 7. | Choose File > Save As and save the banner.png file in the Projects folder.
In Lesson 8, you will export this file as a GIF image.
|
|
