This is getting a bit complex now but lets start off with the hard topic first - maps. Lets take a look at why maps are so complex.

You must have been to a web site and clicked on a picture to get to the page you want. Well you have used an image map then. Move the cursor over the following simple map:

As you can see, thanks to HTML 3.0, this is one of those maps that informs you where you are going as opposed to the other type that just gives co-ordinates. The reason for this is that there is two type of maps:

Server Side Maps

These maps need the browser to send the co-ordinates of where you clicked on an image, back to the server. The server then decides what page to send back to you. The disadvantages of using server maps is they are about half a billion times more difficult to get working and user viewing your page can only see co-ordinates when on the map.

Client Side Maps

Client maps are much a lot better as the browser is able to define what URL is linked to a hotspot. This means that when you put your cursor over an image the browser looks at the co-ordinates, decides if you are over a link and if you are it changes the cursor and displays the URL. The advantages of using client maps is that the user can see where they are going and all the code is in the HTML document.

So I have decided that we are going to use client side maps.

Virtually all browsers now support these maps and they are a lot more user friendly. It is possible to use both types of maps and cater the people with older browser but I will not go into that. Lets move on and look at how we make a client side image map.

How do they work?

Client image maps are predefined areas that the browser overlays over the image. The browser refers to then map when the cursor is over an image. If the cursor is over one of the areas in the map the browser displays the URL. The image above has a map that defines two areas, one for each block. If you could see them, the areas would look like this:

The bright green squares are the areas and they each have a URL attached to them.

How are the co-ordinates defined?

The top left of the image is the starting point of all the co-ordinates where x = 0 and y = 0. The bottom right is the furthest coords for x and y.

I know that the green square is five pixels in from the left and five pixels from the top. Therefore the starting point of my first area is going to be 0,0. The square is 50 pixels wide and as its a square it 50 pixels high also. With a little bit of math's we can figure out the coords of the bottom right of the square. X=55 and Y=55. We only need the two points to be able to draw the square.

Before we go any further we will look at a the code that is the image map for the graphic at the start of the page.

<map name="map1"> - Define the start of the image map and its name
<area shape="rect" coords="5,5,55,55" href="truth.au"> - Define the shape type and the coords of the first square
<area shape="rect" coords="65,5,115,55" href="wahoo.au"> - Define the shape type and the coords of the second square
</map> - Close the map

If you look at the second line you will see the coords of the first square 5,5,55,55. We have also had to tell the browser the shape to use for the coords. The reason for this is that it is possible to draw circles and polygons. In the same line as the AREA tag is the HREF option where the URL is attached.

Now we have the image map sorted out we need to attach it to the image like so:

<IMG SRC="map1.gif" USEMAP="#map1">

What about the other shapes?

While the RECT shape is possibly the most useful it is possible to draw circles and polygons.

Circles are quite simple and need one x,y coord and a radius (in pixels). The x,y coord is the centre of the circle. So to make an area around the circle in the following image we would use the following code:

<map name="map2"> - Make a new map and call it map2
<area shape="circle" coords="90,30,25" href="wahoo.au"> - Create the circle area and apply the URL
</map> - Close the map

The other type of area is the polygon. The polygon can have up to 100 points and is useful for making the odd shape (ha ha ha ha, sorry, that's the only joke in the entire 'HTML made easy' pages.) Like so:

To make a polygon area you just need the x,y coords of each point. The following code is for the triangle graphic above and uses three points:

<map name="map3"> - Time for a new map
<area shape="poly" coords="29,2,3,56,56,56" href="wahoo.au"> - define the polygon with the coords x,y,x,y,x,y
</map> - End the map

Overlapping shapes

It is possible to overlap shapes if the need arises. If you move the cursor over the image below you will see that the corners of the blue square have their own URL but move into the circle and the URL changes. This is done with the following code:

<map name="map4"> - Make a new map and call it map4
<area shape="circle" coords="90,30,25" href="../ok.au"> - The circle has to be first
<area shape="rect" coords="65,5,115,55" href="wahoo.au"> - And the blue square has to be second
</map> - Close the map

When overlapping areas it is important to get the order correct. The uppermost area needs to be defined before any lower areas with the lowest map defined last.

Here are the tags and options for making a client map

<MAP></MAP>	The map is defined between these tags
NAME="#mapname"	Defines the name of the map. Used in the MAP tag
<AREA>	The co-ordinates for each link and defined in this tag
SHAPE="RECT, CIRCLE, POLY"	Sets one of the three type of shape Used in the AREA tag
COORDS="x1,y1,x2,y2" or "x,y,r" or"x1,y1,x2,y3,..."	The actual X Y coords of the link. Used in the AREA tag. These vary from shape to shape

The best way to make the shapes is to use a mapping utility. Producing the coords for complex images is time consuming to say the least.

Note: Be careful if you decide to use a WYSIWYG HTML editor as the mapping utilities built into most of them use server side maps. While the software will produce the code for you there is still the problems related to using server image maps. A good Image Map editor is Cute Map.