Working with Graphics and Tables - New Perspectives on Adobe Dreamweaver CS5, Comprehensive - page 261

Creating an Image Map
• In the Document window, select the graphic.
• In the Property inspector, type a name in the Map box.
• For each hotspot, click the rectangular, oval, or polygonal hotspot tool in the Property
inspector, and then drag over the image in the Document window to create a rect-
angle or circle hotspot or click at various points to create a polygon hotspot.
• For each hotspot, type alternate text in the Alt box in the Property inspector.

You can create three types of hotspots: rectangle, circle, and polygon. After the hotspots
are created in the image, you create separate links for each hotspot. When a hotspot is
selected, the Property inspector displays the hotspot and pointer tools and the hotspot
attributes, which include the following:

• Link. The Web page or fi le that opens when the hotspot is clicked.
• Target. The frame or window in which the linked Web page will open. This option is
available only after you specify a link for the hotspot.
• Alt. The alternate text description for each link.
• Map. The unique descriptive name of the image map. You do not have to name image
maps; however, some advanced coding requires objects to be named so they can
be referenced. If you do not name the image map after you create the fi rst hotspot,
Dreamweaver assigns the name Map to the fi rst image map, Map2 to the second
image map, and so on. Map names must begin with a letter or underscore, and they
can contain letters and numbers but not spaces or symbols.

Gage wants you to add a map graphic to the schedule.html page, and then use the
graphic to create an image map.

To insert the map graphic in the schedule.html page:

◗

1. Open the schedule.html page in Design view.
◗

2. In the Document window, move the insertion point after the page heading text by
pressing the Right arrow key until no heading tags appear in the status bar.

◗

3. Press the Enter key to move the insertion point to a new line, type Interactive
Festival Map , press the Enter key, and then type Click a stage to view the
schedule. We are just starting to confirm the lineup, so there will be much
more to come. Check back frequently! (including the exclamation point).

◗

4. Check the spelling and proofread the text you just typed.
◗

5. In the Document window, select the Interactive Festival Map text, and then for-
mat the text with Heading 2. Then, if there are more than two empty lines above
the heading 2 text, delete the extra empty lines.

◗

6. Click at the end of the text you just entered, and then press the Enter key. You'll
insert the map graphic on this line.

◗

7. In the Common category of the Insert panel, click the Image button in the
Images list. The Select Image Source dialog box opens.

◗

8. Navigate to the Tutorial.05\Tutorial folder included with your Data Files, and
then double-click fest_map.png to insert the graphic.

◗

9. Type Map of the festival stages with links to stage schedules located below.
(including the period) in the Alternate text box, and then click the OK button. A
copy of the festival map graphic is saved in the graphics folder and the graphic
appears in the page.