Index

 

A client sided imagemap.

The 'Imagemap' or 'Clickable map'.

It is common knowledge how you can use an image instead of text to create a link. It is however, also possible to make different links behind different parts of the same picture. This phenomena is known as 'imagemap', and is also called 'ckickable map'.

Example

Here on the left there is a link to an example of such an imagemap.

Server-sided imagemaps.

In the early days of the web, when only 'unintelligent' browsers existed, this was done by having the browser passing the co-ordinates where you clicked the image to a program running on the server. This server-sided program translated the co-ordinates you clicked into the URL that belongs to that co-ordinates. In order to do that, the server had to have a 'map' with the co-ordinates of the borders of the area, and the URL that belongs to that area. And this is exactly where we get in trouble. First of all you allways need a server, and furthermore there are different standards for the syntax in this 'map' file, and last but not least, we need extra communication between the browser and the server and processor time on the server. The most common standards for this map file are those of CERN (Conseil Europeén pour la Recherche Nuclére) , the place where hypertext was born, and NCSA (National Centre for Supercomputing Applications of the Illinois university), where the first popular browser (mosiac) came from. The disadvantages of server-sided image maps are:

  1. A document with a server-sided imagemap does not work 'off-line' and can therefore not be tested without a server.
  2. There are different standards for server-sided image maps, and before you start you shall have to know which standard your server uses.
  3. Extra communication is needed between the browser and the server, for the browser to obtain the URL of the next page. Therefore it is slower than client-sided imagemaps.
  4. The co-ordinates your browser sends to the server have to be processed there, so on a busy server this is extra slow.

Client-sided imagemaps.

Fortunately there is another possibility. First introduced by Netscape Navigator 2.0, adopted by Internet Explorer 3.0, and officially recorded in the HTML 3.2 specifications, there is something like the client-sided imagemap. The advantages of the client-sided imagemap are:

  1. A document with a client-sided imagemap does not need a server, and will therefore also function 'off-line'.
  2. There is one single uniform syntax.
  3. No need for communication with and processing on a server, so it is faster.

We will start creating such a client-sided imagemap from scratch.

 

The image

There are a few steps to make if we want to create an imagemap. First of all we need the picture we want to use fot the imagemap. Save the picture below in a separate folder and call it 'testmap.gif'. On this picture are a number of areas we want to use as a link.

Insert the picture in the web page.

First insert the picture in the web page in the normal way as described below.


<img src="testmap.gif" width="470" height="200" border="0">
 

The tags for the client sided imagemap.

Now we can define the imagemap, and give the map a name. In our example we use the name klikker.


<map name="klikker">
</map>

Now that we have defined the map, we can tell the browser to use this map with the image by adding the usemap="#klikker" property to the img tag. 

<img src="testmap.gif" width="470" height="200" border="0"
usemap="#klikker">

The next thing we have to do is make the definitions for the 'clickable areas' between the 'map' tags. This is done with the 'AREA' tag. The syntax of the 'AREA' tag is as follows:
<AREA SHAPE="[SHAPE]" COORDS="[COORDINATES] HREF="URL">

Let's have a look at how this works out for the different forms of the area tag.

The rectangular area.

Example

For starters, we will first define the red rectangular area as a clickable area to be transferred to the red page. We can do this by adding the red part below between the 'map' tags. 


<map name="klikker">
<area shape="rectangle" coords="15, 0, 125, 31"
href="red.htm">
</map>

The shape 'rectangle' defines the area to have a rectangular shape, the coordinates are defines as right, top, left, bottom, and 'href' defines the URL the area is linked to.

 
Example

We can now define the yellow, the green, and the blue area in the same way. 


<map name="klikker">
<area shape="rectangle" coords="15, 0, 125, 31"
href="red.htm">
<area shape="rectangle" coords="125, 0, 235, 31"
href="yellow.htm">
<area shape="rectangle" coords="235, 0, 345, 31"
href="green.htm">
<area shape="rectangle" coords="345, 0, 455, 31"
href="blue.htm">
</map>

The circular area.

Example

When we want to define a circular area this can be done in a similar way. All we have to do is define the shape as 'circle', and define the coordinates as X-coordinate of center, Y-coordinate of center, radius. How this is done can be seen in the red text below

In our example, the center of the circle is 77 pixels from the right, and 105 pixels from the top, while the radius is 62 pixels. This means that the diameter is 124 pixels. 


<map name="klikker">
<area shape="rectangle" coords="15, 0, 125, 31"
href="red.htm">
<area shape="rectangle" coords="125, 0, 235, 31"
href="yellow.htm">
<area shape="rectangle" coords="235, 0, 345, 31"
href="green.htm">
<area shape="rectangle" coords="345, 0, 455, 31"
href="blue.htm">
<area shape="circle" coords="77, 105, 62"
href="circle.htm">
</map>

Polygon areas.
Example  

If we have to deal with an area that is not rectangular or circular, we define the shape as 'polygon'. As coordinates, we define the X- and Y- coordinates of all points that are needed to define the outline of the shape.
As an example we start with the purple triangle.


<map name="klikker">
<area shape="rectangle" coords="15, 0, 125, 31"
href="red.htm">
<area shape="rectangle" coords="125, 0, 235, 31"
href="yellow.htm">
<area shape="rectangle" coords="235, 0, 345, 31"
href="green.htm">
<area shape="rectangle" coords="345, 0, 455, 31"
href="blue.htm">
<area shape="circle" coords="77, 105, 62,"
href="circle.htm">
<area shape="polygon" coords="270, 54, 315, 99, 225, 99"
href="triangle.htm">
</map>

In case of the triangle we only have to define three X- and Y- coordinates.

Example   If we want to use a shape with much more corners, we must define the coordinates of all the corners of the polygon. This has to be done in the sequence in which we encouter these points when we travel along the border of the shape. In the example below we use the funny shape that is more or less wrapped around the circle. 

<map name="klikker">
<area shape="rectangle" coords="15, 0, 125, 31"
href="red.htm">
<area shape="rectangle" coords="125, 0, 235, 31"
href="yellow.htm">
<area shape="rectangle" coords="235, 0, 345, 31"
href="green.htm">
<area shape="rectangle" coords="345, 0, 455, 31"
href="blue.htm">
<area shape="circle" coords="77, 105, 62,"
href="circle.htm">
<area shape="polygon" coords="270, 54, 315, 99, 225, 99"
href="triangle.htm">
<area shape="polygon" coords="152, 45, 192, 45, 192, 199,
16, 199, 16, 180, 101, 180, 152, 129" href="veelhoek.htm">
</map>

Example

  

The polygon area we use does not allways have an outline that can be defined by nice straight lines. We can also use a polygon area when we have a much more complicated shape. In these cases we "think" a polygon around the shape and use the coordinates of this polygon. As an example we will use the Linux penguin on our image.

    

<map name="klikker">
<area shape="rectangle" coords="15, 0, 125, 31"
href="red.htm">
<area shape="rectangle" coords="125, 0, 235, 31"
href="yellow.htm">
<area shape="rectangle" coords="235, 0, 345, 31"
href="green.htm">
<area shape="rectangle" coords="345, 0, 455, 31"
href="blue.htm">
<area shape="circle" coords="77, 105, 62,"
href="circle.htm">
<area shape="polygon" coords="270, 54, 315, 99, 225, 99"
href="triangle.htm">
<area shape="polygon" coords="152, 45, 192, 45, 192, 199,
16, 199, 16, 180, 101, 180, 152, 129" href="polygon.htm">
<area shape="polygon" coords="375, 90, 375, 50, 390, 40,
405, 40, 420, 55, 425, 85, 445, 120, 450, 155, 462, 168,
435, 190, 365, 190, 334, 180, 333, 158, 351, 144, 351, 150,
361, 112"
href="penguin.htm">
</map>
   

As you can see it takes much more typingwork to define such a complicated shape, and you will have to be very carefull not to forget one of the figures that define the coordinates. To avoid these mistakes a lot of people like to write them down like here below, with the X- and Y- coordinate of each point on a new line. 


<map name="klikker">
<area shape="rectangle" coords="15, 0, 125, 31"
href="red.htm">
<area shape="rectangle" coords="125, 0, 235, 31"
href="yellow.htm">
<area shape="rectangle" coords="235, 0, 345, 31"
href="green.htm">
<area shape="rectangle" coords="345, 0, 455, 31"
href="blue.htm">
<area shape="circle" coords="77, 105, 62,"
href="circle.htm">
<area shape="polygon" coords="270, 54, 315, 99, 225, 99"
href="triangle.htm">
<area shape="polygon" coords="152, 45, 192, 45, 192, 199,
16, 199,16, 180, 101, 180, 152, 129" href="polygon.htm">
<area shape="polygon"
coords="375, 90,
375, 50,
390, 40,
405, 40,
420, 55,
425, 85,
445, 120,
450, 155,
462, 168,
435, 190,
365, 190,
334, 180,
333, 158,
351, 144,
351, 150,
361, 112"
href="penguin.htm">
</map>

You can now see clearly what the X-coordinate of a point is, and what is the Y-coordinate, so there is less chance to make a mistake.

 

Top
Last change on April 27th 2000.