Image Maps can be used as an alternative means of linking HTML content together. They are quite different from your average text or graphic link in that they are placed "on top" of a graphic and are mapped out in coordinates. A set of coordinates defines a region, and a region can be rectangular, circular, or polygonal in shape. You can place multiple regions, or "Hotspots" on one graphic. 

Hotspots have their pros and cons.  They can’t be animated or rolled over because they’re invisible. They can, however, be made into irregular shapes which can be very useful if, for instance, you are trying to place 50 State links on a JPEG map of the USA.  You could easily place 50 polygonal Hotspots on each State. With some experience you will find a task such as this is virtually impossible using Graphic Links.

(Figure 12.1)

We want to use the Hotspot Tools to create Hotspots on the three highlighted States on the Map.  Select the Rectangular Hotspot Tool from the Toolbox and {Click} and drag a Hotspot over the State of Kansas. 

(Figure 12.2) 

Fireworks differentiates Hotspots from other content by making them transparent and light blue.  This is a default color that you can change if you wish.

Notice that the Rectangular Hotspot does a reasonable job of covering the State but it isn’t perfect.  You can modify a Hotspot by selecting it with the Sub selection Tool and {Clicking} and dragging any of the light blue points that appear around its outline.  You can apply Transformations from the Modify menu as well.  Scaling is straightforward but rotating doesn’t usually produce the results that you’d expect.  Experiment with these settings if you wish.

Hotspots have options that can be accessed through the Object Panel.  As with any other content, the Hotspot must be selected if you want to see its options reflected in the Panel.

(Figure 12.3)

The Link drop down menu allows you to type in a URL for your Hotspot. You’ll notice that the menu contains any URLs that you have already used in your current document in addition to any that you have included in your URL Library Panel.  Input http://www.kansas.com for this URL.

The <alt> field allows us to add an alternative label for those users who are viewing our page with a text browser.  Input the word "Kansas" into this field.  When you preview your page you’ll see that placing your cursor over the Kansas Hotspot will bring up the "Kansas" <alt> tag we have applied.

(Figure 12.4)

If the document we are working on is going to be part of an HTML frameset we can use the Target drop down menu to target other frames. The menu gives you four default targets and the option to input your own.

(Figure 12.5)

If you’d like to change the color of your Hotspot, {Click} on the small black arrowhead to the right of the light blue color swatch.  This will bring up the standard Fireworks color palette that we’ve used to change colors for a variety of elements.

The last item in the Hotspot object panel is the Shape drop down menu. You can quickly change your selected Hotspot from one shape to another by selecting an option from the menu. If you’d like to change your circular Hotspot to a rectangular one, simply select that option from the menu.

If you’d like to make copies of your Hotspots select that option from the Objects Panel Pop Out Menu.  This menu also gives you quick access to the Behaviors Panel.

We can continue with our map exercise now that we’re familiar with all the options we have for creating Image Maps.  Let’s try creating a circular Hotspot.  Select the Circular Hotspot Tool from the Toolbox and use it to create a link for the state of West Virginia.  Again, you’ll notice that it does a pretty good job but it isn’t quite perfect.  We have some overlap into the surrounding states.

(Figure 12.6)

If you have many irregular shapes that you want to link your best option is to use the Polygonal Hotspot Tool.  Select this tool from your Toolbox and use it to draw a Hotspot over the state of Nevada.  It operates like a simplified Pen Tool. {Click} on one corner of the state and move your cursor to an adjacent corner and {Click} again. A line segment connects the two points that you’ve created.  {Click} around the state until you have a reasonable outline and return your cursor back to the first point you created to close your shape. You should now have a Hotspot that follows the state outline precisely. 

(Figure 12.7)

If you select "Insert/Hotspot" from your Menu you’ll find you have an alternative method for Image Map creation.  This approach will only work if you have a vector shape selected. Fireworks will create a polygonal Hotspot around your selection no matter how complex it is. This can be very useful for irregular shaped objects like some of the states in our US map.  If your lucky enough to receive your map file as a vector you could easily use the Insert command to apply accurate Hotspots to every state without having to draw a single line.

If you find you don’t need a particular Hotspot you can get rid of it by selecting it and hitting the [DELETE] key.

In later units you will see that you cannot only use Hotspots as links but also as triggers for disjointed rollovers.