How do I create an image map for my Web page?

What you're talking about is what we Web folk call an image map, and they've been around in the Web world for years, albeit never too fabulously labeled or explained. The trick is that you need to do a fair bit of HTML footwork to get them to actually work properly...

There are two parts to an image map (and in this explanation, I'm only going to talk about cilent-side image maps. Server side image maps are so crufty and old that I haven't seen them used on a site in years) the map itself, which identifies regions and assigns a target URL to each, and the additional attribute on the img tag that tells the Web browser that there's an associated map.

To show you how this works, let's pick a graphical element that you might use on your own page. For fun, I'll pick the following image from the White House Web site:

I include this image here with some basic HTML:

To turn it into a clickable element, I wrap the img tag with an a href. That's still pretty rudimentary. Now, let's build an image map on top of the photo...

You can build these coordinates by hand - the top left is 0,0 and you measure across, then down, so the center of this picture will be 400/2, 267/2, or 200,133 - but that's totally barmy, in my opinion. Instead, there are some nice shareware apps you can download to make things a lot easier, and every halfway decent Web page editor has a built-in image map utility too, some of which are wonderfully sophisticated.

For Windows, you can try Imagemap Applet Builder, and for the Mac, check out YokMap. There are probably better free alternatives too, if anyone wants to recommend one...

Whether you use the tool or not, an image map itself is a set of regions, coordinates that define those regions, and associated hypertext references. The three primary regions you can work with are RECT for rectangles, CIRCLE and POLYGON. For simplicity, most people work with rectangles, because you need only define the top left and bottom right points, so it's pretty easy.

For demonstration purposes, let's take the image of the White House and make it so that clicking on the bottom left quarter takes you to the Democratic Party web site, clicking on the bottom right quarter takes you to the Republican National Committee site, and the top half of the image takes you to the White House site directly. Got it?

Since we've already figured out that the center point is 200,133, and that the bottom right corner of the entire image is the exact dimensions of the image, or 400,267, that means that the top half can be represented as a rectangle with its top left coordinate of 0,0 and its bottom right coordinate as 400,133. The bottom left rectangle is 0,133 and 200,267 while the bottom right rectangle starts at 200,133 and ends at 400,267. I hope that makes sense!

Now we're ready to turn these coordinates into an actual image map on a Web page!

Notice here that the image map gets a unique name - in this case testmap - and that each shape has all four coordinates specified in the coords attribute and that each has an href just like the a tag has.

That's most of the work (and the hardest part, frankly) so now we just need to associate the image with the new image map. That's done by adding the new usemap attribute to the img, making sure to prepend a # to the name. So the actual image inclusion tag looks like this now:

Put it all together and here's a version of this image that has the three regions defined. Click on a different corner to see what happens!

I hope that gets you moving in the right direction with image maps. If you want more information, may I suggest my popular book Creating Cool Web Sites as a good companion? In any case, good luck!