1. Technology

How to Build Image Maps Without an Image Map Editor

Image Maps Aren't Hard to Build by Hand

By

Businessman's hands using computer at desk
moodboard/Brand X Pictures/Getty Images

Image maps are an exciting and interesting way to liven up your Web site. And with the large number of image map editors available, you would be surprised at how simple it really is to create an image map, even by hand.

What you need:

Most image editors will show you the coordinates of your mouse when you point in the image. This is all you need to get started with image maps.

First you create the map on your Web page, all it needs is a name.

<map name="name">

When you create an image map, you are creating an area that is clickable on the image. There are three shapes you can create:

  • rect - a rectangle or four sided figure
  • poly - a polygon or multisided figure
  • circle - a circle

To create the areas, you need to know the coordinates you would like to map.

For a rectangle, you map the top left and bottom right corners. All coordinates are listed as x,y (over,up). So, for upper left corner 0,0 and lower right corner 10,15 you would type: 0,0,10,15. You then include it in the map:

<map name="name">
<area shape="rect" coords="0,0,10,15" href="http://webdesign.about.com/">

For a polygon, you map each coordinate separately. The Web browser automatically connects the last set of coordinates with the first.

<map name="name">
<area shape="rect" coords="0,0,10,15" href="http://webdesign.about.com/">
<area shape="poly" coords="10,0,14,3,7,10" href="http://webdesign.about.com/">

Circle shapes only require two coordinates, like the rectangle, but for the second coordinate you specify the radius, or the distance from the center of the circle. So, for a circle with the center at 20,10 and a radius of 5 you would write 20,10,5:

<map name="name">
<area shape="rect" coords="0,0,10,15" href="http://webdesign.about.com/">
<area shape="poly" coords="10,0,14,3,7,10" href="http://webdesign.about.com/">
<area shape="circle" coords="20,10,5" href="http://webdesign.about.com/">

The only thing left for your image map is to close the map and link to it in your image.

<map name="name">
<area shape="rect" coords="0,0,10,15" href="http://webdesign.about.com/">
<area shape="poly" coords="10,0,14,3,7,10" href="http://webdesign.about.com/">
<area shape="circle" coords="20,10,5" href="http://webdesign.about.com/">
</map>

<img src="image" usemap="#name">

©2014 About.com. All rights reserved.