Imagemaps

Imagemaps allow you to add clickable regions to an image using only HTML. They are sometimes less efficient than slicing up an image into a group of smaller images, especially if you plan to use Javascript roll-overs in conjuction with them. However, for irregular shaped objects and creative designs, imagemaps are still very useful. The following method demonstrates how to create client-side imagemaps. (Note: There is also an older variety of imagemaps called server-side imagemaps, but they are less efficient and no longer sensible to use). In the body area of your HTML, create a <map> tag and name it like so:

<map name="testmap">

Next, you need to create <area> tags for each clickable area you wish to put on your image. Each area tag as the following three attributes:

• shape - defines the shape of the clickable area. The choices are "rect" (rectangular), "circle" (circular), and "poly" (polygonal). The default attribute is "rect," so it is unnecessary to define a shape if you are making a rectangular area.





• coords - defines the pixel coordinates of the area. These can be found using most any image editing program. (If you are using Photoshop, they can found in the Info Palette.) For rectangles, give the x,y coordinates of the top-left corner followed by that of the bottom-right corner (see example below). For circles, give the x,y coordinates of the center followed by the radius in pixels. For polygons, list the x,y coordinates of all the verticies of the polygon in connect-the-dots order.





• href - defines the page the area will link to when clicked. It works just like a standard <a href> tag.

The <area> tags do not need closing tags, but the <map> tag does, so make sure to add a </map> after you finish creating your clickable areas. Here is an example of a full imagemap code:

<map name="testmap">
<area coords="22,22,113,51" href="link1.htm">
<area shape="circle" coords="38,67,13" href="link2.htm">
<area shape="poly" coords="145,9, 156,37, 182,37, 175,9" href="link3.htm">
</map>

The final step is to tell an image to use your imagemap. Do this by inserting a "usemap" attribute to an image's <img> tag. Make sure to use a quot;#quot; symbol:

<img src="spoonodelicimage.gif" usemap="#testmap" border=0>

The following is the imagemap created by using the example code:

Computer Playground · Templates Resource