---------------------
---------------------
---------------------
---------------------
---------------------
Art 444 Lecture Notes
Creating Image Maps with Dreamweaver
HTML Image Maps allow you to place multiple hotspots or links on on graphic. When you make a graphic into a link, the entire graphic becomes the hotspot. If your graphic is an irregularly shaped image sometimes you will want to isolate the hotspot of the link (the area that becomes a link when the mouse enters it) to just the shape itself. This is where a Image Map comes in handy.
Image Maps are quite simple to make in Dreamweaver; first you will need to create an image in P.S. with various areas in the image you will use for the hotspots (or one irregularly shaped image to isolate into a hotspot). Optimize and save the graphic as a gif or jpeg. Place your image into to your Dreamweaver using the little "tree" icon on the toolbar and select it. Make sure your Properties window is open and fully expanded (click the little arrow on the lower right-hand edge). At the bottom left of the window you will see the Map tools. Select one of the shape icons appropriate for the type of hotspot shape you will need to make and click and drag your mouse to create the shape. The square makes square or rectangular shapes, the circle makes ovals and irregular shape makes polygons. Deselect with the Arrow tool by selecting it and clicking outside of your hotspot shape in your map (this is especially important after you complete a shape with the polygon hotspot tool). If you need to move the shape, click on it with the arrow tool and move it. As you create hotspots you will need to type in the filename the hotspot will link to in the link field. You can change the this at anytime by simply selecting the hotspot and changing the filename in the link field.
Below is an example of a Image Map using all three shapes. Notice that the pointing hand cursor does not appear unless your mouse is actually within the shape itself.
Here is the HTML that Dreamweaver creates for a Client-side Image Map. Notice that there is two parts to the Image Map:
Here's the HTMl map coordinates:
<map
name="Map">
<area shape="rect" coords="15,14,50,39" href="#">
<area shape="circle" coords="167,26,17" href="#">
<area shape="poly" coords="100,13,83,39,119,38,100,13"
href="#">
</map>
Note: You would use the filename in place of the number sign (#) which is a nowhere link to link to an actual page.
Here's the code for the map within the <IMG SRC> tag:
<img src="images/imagemap.gif" width="200" height="50" border="0" usemap="#Map">
You want to make sure that your image does not show an link border around it as that sorta ruins the whole idea of using an image map. Note: View the HTML source code for this page to see how it actually looks.