All You Should Read

Web Tutorials

A Picture Says More Than A Single Link

So... you want one of those, huh? (Hover your mouse over the regions that have been outlined in red. Spiffy, eh?)

They're called image maps, and they're fairly easy to make, even by hand.

All it takes is a little patience, and a graphics program (MSPaint will do nicely - no need to spend hard earned $$$ on an expensive program just for this...)

Please note: The clickable regions have been outlined in red for clarification purposes only - actual images maps have no distinguishing look.

So... what is an image map?

An image map is an image that has certain areas that function as hyperlinks. That's not quite the same as just using an image as a link - this involves defining areas that become active instead of using the whole picture.

An image map consists of two parts:

1. An image (duh!)
2. A map (also duh)

The image itself is easy - just add an image to your page the way you're used to.

The map, however, is a different story. It's not hard - it just requires some attention. There are two ways to do this: insert the map as an object, or define the map as an addition to the image. In this tutorial, we'll go for the second method, as this is what's been used for years, and has been proven to work even in older browsers.

This is not a map like you're used to... it's a text map. What it does is: it defines the X and Y coordinates in the picture of the region you want to hotlink.

The image on the right shows you how to find a rectangle's coordinates in a graphics program.

There are three types of shapes you can hotlink in an image map:

• Rectangles
• Circles
• Polygons

A polygon is an irregular shape, that can go all over the place.

We'll start with the easiest (a rectangle). But first...

Preparing The Image Map

Let's start with creating the image map. We'll use the image as shown above.

<img src="imagemap.jpg" 
   usemap="#map1" 
   width="300" 
   height="185" /> 
   
<map name="map1">

 <area href="#"
   alt="Rectangle"
   title="Rectangle"
   shape="rect"
   coords="" />
   
 <area href="#" 
   alt="Circle"
   title="Circle"
   shape="circle"
   coords="" />
   
 <area href="#"
   alt="Polygon"
   title="Polygon"
   shape="poly"
   coords="" /> 
   
</map>

As you can see, the image itself is a regular image, with one addition: the usemap attribute. If you've read the links page, you'll recognize the pound sign (#) in there. The function here is exactly the same: we're referring to a source on the same page. Because we're not using the image as an illustration, but as a way to create fancy links, the alt attribute is left out. An image map is the only use of an image where the alt attribute can be discarded.

Below the image, you can see the map. It's a so-called container element, which means that it can (in this case: must) contain other elements. The map itself only needs one attribute: name; without it, the picture has nothing to point to, and the whole system would never work.

Between the map tags, you'll see three copies of the area element; these are closed elements, meaning that they have attributes, but no contents.

The attributes define how each area functions. I've left the coordinates empty... because that's what we'll be working on next.

Defining A Rectangle

The rectangle is the easiest shape to define: all you need to know are the X and Y coordinates of the left top and the right bottom. The second image above shows how to see these coordinates in a graphics program. Select the area you want to hotlink, and the program displays the start and end coordinates of your selection.

When you have these, you enter them simply going from left to right, seperated by commas: 64,102,98,165

In code: coords="64,102,98,165"

Easy enough, huh?

Onwards, then.

Defining A Circle

A circle's attributes consist of the X and Y coordinates of its center, followed by the radius (the distance between the center and the outside);

When you have these, you enter them simply going from left to right, seperated by commas: 154,75,17

In code: coords="154,75,17"

Defining A Polygon

A polygon's attributes consist of the X and Y coordinates of each of it's corners, starting at any point, and following the outline of the polygon until you're back at the start.

The more corners a polygon has, the longer the list of coordinates - to save yourself a headache, don't make the shape too intricate. ;-)

The polygon defined in our image (we'll start at the left top, as that is most common practice) goes from 225,83 to 257,104, then to 262,129, then to 214,119, and then we're back at the start: 225,83.

In code: coords="225,83,257,104,262,129,214,119,225,83"

So, all parts together and complete:

<img src="imagemap.jpg" 
   usemap="#map1" 
   width="300" 
   height="185" /> 
   
<map name="map1">

 <area href="#"
   alt="Rectangle"
   title="Rectangle"
   shape="rect"
   coords="64,102,98,165" />
   
 <area href="#" 
   alt="Circle"
   title="Circle"
   shape="circle"
   coords="154,75,17" />
   
 <area href="#"
   alt="Polygon"
   title="Polygon"
   shape="poly"
   coords="225,83,257,104,262,129,214,119,225,83" /> 
   
</map>