Because they tend to be less than bandwidth-friendly, image maps are not as common as they once were. Today's designers spend more time splicing large images into complex systems of smaller images than they do turning a single image into a multi-link map. But maps haven't disappeared from the HTML scene entirely. From front page navigation systems to specific graphics within a site, maps continue to crop up, and chances are good that you've created one for a site you work on at one time or another.

• Creating a Map from Scratch
• Carving Your Hotspots
• Editing a Map

Regardless of how frequently you work with maps, when you do need to configure a set of hotspots, you need a quick and easy-to-use tool. The map editor integrated in HomeSite 4.5, ColdFusion Studio 4.5, and JRun Studio puts image mapping at your fingertips, eliminating the need to purchase additional software.

To create a new image map, click the New Image Map icon () to open the "Create Image Map" window. This allows you to select an image to be mapped from those that already appear in your document or browse to select a new image. After choosing the image, fill in the name you want to use to identify the map and click OK. The Image Map Editor window will appear.

Figure 1: The image above shows the built-in image map editor window. The image being mapped is shown on the left. Because there are no defined hotspots yet, the right-hand window pane is blank.

At the top of the map editor, you'll see buttons bearing shapes corresponding to the RECT, POLY, and CIRCLE hotspots you can configure for a map. All you need to do to create your hotspot is select the appropriate shape and then use your mouse to define the perimeter of the shape. Outlining the perimeter works a bit differently for each shape:

Polygon: Click your mouse at the starting point of the image. Drag it to the next "point" and release the mouse. Continue dragging and releasing until you've reached the end of the shape's perimeter.

Figure 2: The Tag Editor – Area box allows you to control values like the HREF and ALT attributes.

When you've reached the end (or when you double-click), the "Tag Editor – AREA" dialog appears. This allows you to fill in the HREF value for the hotspot and the ALT text.

Tip: As an accessibility feature for image maps, ALT text was introduced in HTML 4. It can be important for anyone using a user agent to surf your pages, so be sure and include a value that explains the function of the hotspot.

Rectangle/Square: Click your mouse in one of the corners of the shape. Without releasing your mouse, drag to outline the entire rectangular shape. When finished, release your mouse, and the "Tag Editor - AREA" dialog appears.

Circle: Imagine the circle is a square and click your mouse down at the top left corner of the square. Then start dragging to begin creating a circular outline the size of your circle. When you've reached the desired size, release your mouse, and "Tag Editor - AREA" dialog appears.

Figure 3: All areas in the image above have been defined. The core image appears on the left side, and the outlines defining the perimeter of each hotspot are visible. The right-hand window pane lists the hotspots defined for this image.

After all of your hotspots have been defined, click File / Save and Exit (Ctrl-S) to return to your regular editing screen. The completed map will have been added to your page.

Tip: Don't worry if your outline doesn't come out perfect the first time. Delete it and start again. To delete a hotspot, simply select it and press the delete button on your keyboard.

To make changes to a map you created previously, or that someone else created, open the image map editor by right-clicking in any <AREA> tag and choosing "Edit Image Map." This will open the map editor, and you will see the image on the left side and the series of hotspots on the right.

If you need to add a new hotspot, choose the appropriate shape tool and follow the steps described above to outline the area. If you need to edit one of the existing hotspots, you can click the shape "in" the image to activate it, or click the appropriate hotspot from the right-hand window pane.

Once the hotspot is selected, pick up any of the "handles" that mark a corner or start/end-point and drag to adjust the coordinates.

Figure 4: By clicking on one of the "handles" in a hotspot and then dragging the mouse, the hotspot coordinates can be adjusted.

To edit the HREF or ALT text value, doubleclick the shape or the hotspot in the right-hand window pane to raise the "Tag Editor – Area" window.

Once finished, click File / Save and Exit (Ctrl-S) to return to your regular editing screen. The map on your page will contain the updated information.

A Good Addition

Whether you create a map a month or a map a site, you'll find the built-in image map editor a time-saving feature. The inclusion of the integrated mapping device is especially nice as it allows you to stay within the familiar Allaire environment for all your mapping needs. The next time your Web designer passes on an image for mapping, give the map editor a try. Within minutes, your hotspots will be up and running, and you can turn your attention back to other coding matters.