Tabular Data | Image Maps | Image Rollovers | Flash Elements
Unit 3: Advanced Dreamweaver Features
Image Maps
Creating image maps or "hot spots" is fast and easy in Dreamweaver. An image map is an active area on an image in a web page that provides a link, or multiple links to other URLs or websites. If you move your mouse over the image map, you will see the links appear. Here is an example of a simple image map:
Notice that when you hold your mouse over Athens and Sparta, those two areas of the map are actually links, or "hot spots."
|
|
|
1.
|
Begin creating your image map by first
selecting an image. On a fresh page or anywhere on your working site,
go to Insert>Image and
browse to the folder that contains the image you want to turn into
an image map. Insert this image on your page. Now select
the image from the page with a single click. Your image and Property
Inspector should be similar to the following screenshot:
|
|
2.
|
With the image selected, note that in the Property Inspector that Map has become available in the bottom left corner. The image MUST be selected in order for you to get the image map option. |
|
3.
|
 The
arrow icon returns you to a normal pointer once you have completed
the mapping. The blank space above the icons allow for map naming
and the three icons with shapes are the actual map drawing tools.
Depending on the nature and content of the image and the area you
wish to map, you select one of these tools which most closely matches
the shape of the area to be mapped. |
|
4.
|
In
this example, we have chosen the rectangular tool, as it most closely
matches the text lines in the sample image. We will make three
separate image maps or hot spots over the three choices. Starting
with California Surfing Safari, begin drawing the rectangular outline
from the top left of the text line. Fully cover the California
Surfing Safari section with the outline. When finished, it should
look like the following screenshot:
Note the Property Inspector attributes now change to reflect the properties of the California Surfing Safari image map. In the Link section of the Property Inspector, replace the # sign with the URL of the site you want the hot spot to link to. In the Target box, use the pulldown to select the _blank tag so this link will open up into a new browser window. Finally, in the Alt section, provide a friendly image title such as California Surfing Information. Your image map should appear as follows:
Continue adding hot spots until your image map is complete. |
contact the site admin: Anita Warfford (aawarffo@uncg.edu)
last updated: 11/21/03