How to make an image map on Dreamweaver

In this tutorial I will show you have to add an “image map” to your website, or a picture with clickalbe links on certain areas. My plan is to use the front of my place as the portal into my story, so I want the reader to be able to click on the graffiti or door to view different multimedia pages. I will use that image as an example.

First, add the image to your website by saving it within your file folder and dragging it into the code. It will look something like this: <img src=”file:///C|/Users/mlw53.PITT.001/Desktop/imgmap.jpg” width=”750″ height=”563″ alt=”building” />

Next, click on the image and highlight it on the “design” side. Below you will see the “properties” bar with three drawing tools, rectangle, circle and polygon. For this instance, I will use the rectangle but it is up to you of what shape fits your hyperlink best. Draw the shape around the image. You also will need to specify what you want the area to link to by clicking on the folder in the “link” box.




The cold will look like this. I find this method much easier than hand-coding because it finds that coordinates for you.

<map name=”Map” id=”Map”>
<area shape=”rect” coords=”165,445,298,535″ href=”#” />

I think you can also create image maps on Photoshop but I couldn’t get that method to work well for me. I would suggest editing your image in Photoshop first, giving the hyperlinked areas text, and then saving the file into Dreamweaver for image mapping.



~ by mlw53 on November 15, 2010.

%d bloggers like this: