If you click the logo at the top of this page you go to my home page. To do that I simply put an image tag inside anchor tags.

<a href="index.htm> <img src=".." alt=".."></a>

The whole image is a link, but there is also a way to assign different links to distinct areas of an image through the use of a client side image map. *

It sounds geeky – alright, it is a little geeky – but nothing you can't handle. Besides, if you have gotten this far into the tutorial there is a bit of the geek in you. Admit it. It's not so bad. I've lived with it for years.

Below is an image 100px wide by 50px high. Below that is the image tag that displays it.

Usemap has a hashmark (#) – usemap="#on-off", but name doesn't – name="on-off".

There can be multiple image maps on a page, but each must have a unique name.

The area element doesn't have a closing tag.

If the area tag has an href="" attribute it should also have an alt="" attribute.

All that looks relatively straightforward except the coords part, which I will admit, is not all that straightforward – but don't panic. Take a moment to close your eyes, take a deep breath and embrace your inner geek.

The x,y co-ordinates of the upper left hand corner of the image is 0,0. Starting there, x counts from left to right and y from the top down.

When the shape is set to rect, coords creates a rectangle. In coords="x1,y1, x2,y2" the first two digits are the x,y co-ordinates of the upper left corner of the box and the second two are the co-ordinates of the lower right corner.

U L L R

coords="x1,y1, x2,y2"

coords=" 0, 0, 50,50"

U L L R

coords="x2,y1, x3,y2"

coords="50, 0,100,50"

Below you can see the code in action. Rather that take you to another page I set it so that clicking "1" or "0" below will simply reopen this page, but I could have linked to any page on this site or, for that matter, anywhere on the net.

This is just one simple example of something that can get quite complex. The areas you select as "hot" can be anywhere on the image. You don't have to start in the upper left. The order of the area tags is unimportant.

There are any number of tools that can help you layout image maps. The image editor GIMP (recommended on the previous page) has a handy tool that does the hard work for you. Polygons in particular can be a real chore without such a tool.

Image maps are not limited to just links. Clicking on an image map button can also trigger a program or script to run. Below I use some basic javascript to open alert windows – however the possibilities are truly unlimited.

Learning javascript (not to mention PHP, jQuery, Python, ...name your program) is down the road. For now let's not push our luck – you only just discovered your inner geek.

* Usually they are called "image maps", but technically they are "client side image maps", as opposed to a "server side image map", in that it runs on your computer (the client), not the server. There is such a thing as a server side image map, but as far as I know no one ever uses them.