Making an Image Map

What is an Image Map?

An image map is an image which has one or more links that apply to different regions of the image.

The original image maps were server-side image maps. Information about what different areas on the map mean were stored in a separate file on the web server. The server would decide what to do next if someone clicked on the image. These are not used much because for several years the major browsers have understood client-side image maps.

With a client-side image map the browser does the work all the information it needs is right there. Of course this means that in order for an image map to work the browser has to know what to do with this information.

Major browsers such as Netscape and IE have known how to do client-side image maps for several versions now, but it is still best to include text links also:

• for browsers that don't use images
• for browsers that don't understand image maps
• for people who don't want to wait for your image
• for people who can't figure out how to use your map
• in case something is wrong and your image doesn't display

How to Fake an Image Map

Cut the image into smaller pieces, and reassemble them in the page using a table. Put link tags around each piece of image that should go somewhere. Only one link possible per piece of image.

If your image is easily split up this way, it might be the better option.

How to Make an Image Map

Figure out where your active areas are. They are described by their pixel co-ordinates with 0,0 being the top left corner. You can do this by guessing until you get it right, or by using a graphics program that tells you co-ordinates as you move your mouse over the image, or you can use software such as Fireworks that makes the process easy because you can just mark out areas with the map tool and it does the rest.

Put the image in your page using a normal image tag except add the attribute usemap="#name_of_map", where name_of_map is what you've named your map. You can have more than one image map in the same page as long as they've got different names.

For the map above the image tag is :

Put the map in your page. It can be right next to the image or it can be elsewhere.

In our example the map code is :

<map name="m_imgmapexample">
 <area shape="poly" coords="161,11,163,24,152,31,164,32,166,44,173,33,185,37,176,28,183,15,171,21" href="sample/starpage.htm" alt="this is a star-shaped polygon" >
 <area shape="poly" coords="74,5,106,6,90,33" href="sample/triangle.htm" alt="this is a triangular polygon" >
 <area shape="circle" coords="122,50, 14" href="sample/circle.htm" alt="this is a circle" >
 <area shape="rect" coords="12,17,63,49" href="sample/rect.htm" alt="I'm a rectangle!" >
</map>

The map begins with a <map> tag and ends with a </map> . The map tag needs a name="name_of_map" attribute where "name_of_map" is the name of the map used in the image tag. Note that in the image tag the name has a # before it, but in the map tag it doesn't.

Then put an area tag for each active area. The area tag needs these attributes:

shape

Choices of shape are rectangle, circle, and polygon.

coords

Coords stands for the coordinates of this shape. They tell the browser where on the image the shape is. The coords are all located by counting pixels from the upper left corner of the image. What coords you need to give it depend on which shape you are describing. Each number is separated by commas, see examples below.

rectangle	x,y coordinates of upper-left and lower-right corners
circle	x,y coordinate of the center of the circle and the radius of the circle in pixels.
polygon	x,y coordinates of each point

href

This is like the href in a regular link tag. Put the address of the page or other thing you are linking to here.

alt

Put a brief description of what you are linking to here. Some browsers that don't do images, do know how to give a list a links using the alt text. The alt text will also show up in the little yellow popup boxes when you mouse over the active area, in those browsers that do that for images (Netscape & IE versions 4+ on Windows).