• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 3. Creating Links > Creating Image Maps

Creating Image Maps

You've experienced how easy it is to make an image link to a page. The user can click the image to go to that linked page. You can also divide the image into several links by using an image map to place individual hotspots or clickable areas on the image. These hotspots are not limited to rectangles; they can have other shapes. In the following exercise, you will add a rectangular hotspot, a circular hotspot, and a polygonal hotspot to an image.

Open map.htm from the Lesson_03_Links folder. Select the map graphic.

This large map graphic needs to be divided into three hotspots.

In the property inspector, type worldmap in the Map text box.

Don't use spaces or special characters in the name. You can have several image maps on a page, but each map must be uniquely named.


If you don't see the Map text box, click the expander arrow in the bottom-right corner of the property inspector.

Select the rectangular hotspot tool below the map name in the property inspector. Click and drag around the words “Hawaiian Islands.”

A translucent blue-green area with handles appears around the text, and the property inspector displays hotspot properties. Dreamweaver automatically places a null link (#) in the property inspector's Link text box.

Select the pointer hotspot tool below the Map name text box on the property inspector. Resize the hotspot you created in step 3 by dragging a handle until the hotspot encompasses the small dot representing the Hawaiian Islands.

The hotspots you create are easy to edit; you can resize, move, or delete them at any time. To move the hotspot, position the pointer inside the hotspot and drag. To delete the hotspot, select it and press Delete (Mac) or Backspace (Windows).

In the property inspector, type Hawaiian Islands in the Alt text box.

This text serves the same purposes as <alt> text for images.

Type trips.htm#hawaii in the property inspector's Link text box.

In the preceding exercise, you created a named anchor in the Hawaii section of the trips.htm file. Now you are making this region of the image point directly to the Hawaii section, instead of linking to the top of the page.

In the property inspector, select the oval hotspot tool. Drag a circle around Australia, including the words “Australia & South Pacific.”

You have created a circular hotspot.

In the property inspector's Alt text box, type Australia and, in the Link text box, replace the number sign (#) with http://www.australia.com. Then choose _blank from the Target pop-up menu to have the link open in a new browser window.

You have directed the circular region to open the link in a new, unnamed browser window.

In the property inspector, select the polygonal hotspot tool. Click at multiple points around North America.

When you use the polygon tool, each click creates a point. A line connects each subsequent point to the preceding point. As you click, you'll see the translucent hotspot area begin to form. Continue clicking around North America until you have the shape you want.

In the Alt text box of the property inspector, type North America. In the Link text box, type trips.htm, or click the folder icon next to the text box to locate and select the trips.htm file.

When you finish working with the image map, you can click another area of the image. Clicking outside the image map resets the property inspector to display image properties.

Save the file and preview it in the browser.

Test the links you have created.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint