Creating Image Maps


It's easy to add a link to an image; just select the image and use the Link text box in the Property Inspector to define the link's destination. But what if you wanted to have different parts of an image link to different pages? You'll need an image map . With an image map, you can define areas of the image as hotspots , and each hotspot has its own link.

To create an image map:

1.
Select the image you want to turn into an image map.

In this example, we're using a map of Washington, Oregon, California, and Nevada ( Figure 8.24 ). We'll add hotspots to each of the states.

Figure 8.24. We'll turn this map of four Western states into an image map.


2.
In the Map text box of the Property Inspector, enter a name for the image map ( Figure 8.25 ).

Figure 8.25. Both the image and the image map have been named in this figure.


The name cannot begin with a number and can only contain letters , numbers , or the underscore character.

3.
Use the Rectangle, Circle, or Polygon tools to draw a hotspot over part of your image.

The tool you use depends on the shape of the area that you want to make into a hotspot. For example, we used the Rectangle tool to create the hotspots for Washington and Oregon, and the Polygon tool to create the hotspots for California and Nevada.

Dreamweaver shows the hotspot as a light blue area overlaid on your image ( Figure 8.26 ). The blue highlighting won't show up on your Web pages.

Figure 8.26. Each of the state images has been overlaid with a hotspot.


4.
When a hotspot is selected, the Property Inspector shows properties for the hotspot ( Figure 8.27 ). Use the Link field to attach a link to the hotspot.

Figure 8.27. Add the link for a hotspot in the Property Inspector.


5.
(Optional) Use the Target pop-up menu to target the destination of the link.

If you need more information about the use of the Link or Target controls, see Chapter 7.

6.
Enter the alternate text for the hotspot in the Alt field.

7.
Repeat steps 3-6 for each of the other areas on the image you want to turn into hotspots.

Tips

  • To change the properties of a hotspot, use the hotspot selection tool to select the hotspot, then make changes in the Property Inspector.

  • You can resize and reshape hotspots; just select the hotspot with the hotspot selection tool, then click and drag one of the selection handles that appear at the corners of the hotspot.

  • Image maps have somewhat fallen out of favor recently; you see more sites using interactive Flash movies to provide users the benefits of clickable images.





Macromedia Dreamweaver 8 for Windows & Macintosh Visual QuickStart Guide
Macromedia Dreamweaver 8 for Windows & Macintosh
ISBN: 0321350278
EAN: 2147483647
Year: 2005
Pages: 239

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net