Dreamweaver Tutorials - Image Maps

Creating Image Maps in Dreamweaver CS3

Image maps are just another way to create links, in these Dreamweaver tutorials we shall be looking at creating image maps to add functionality to your web site.

How to createt a image map in Dreamweaver
To start with we need a basic web page that contains an image.


For the purpose of this tutorial I have chosen 3 different shapes to highlight the 3 possible image maps that can be used, we have a round image, and rectangle and finally an image shape that is little unconventional.

To start with we make a selection on the image that we wish to use as part of our image map by just clicking on it, a black border well appear around the image signifying that the image is selected,
Image here

Using the Property Inspector to create the Image Map
With our image selected  we now need to go to the property inspector ( if this is not visible press Ctrl+F3 ), located in the bottom left hand corner are 3 little green shapes and a black arrow, it’s these that we are interested in.

I shall deal with the rectangle first. With the image still highlighted I select the rectangle image map icon then it’s just a matter of clicking and dragging over the part of the image that is going to make up the hot spot area.

With the image map still selected go back to the property inspector, we can now add the information to link the image map to a URL, in the link field I have entered the file name that I want the user to go to when this part of the image is clicked.

Other shapes of Image Maps
To add a round image map to an area you would use the center button on the property inspector, while the far right button ( the Polygon tool ) allows you to create image maps of  an irregular  shape.

That's how easy it is to create image maps in Dreamweaver.