C & G web - Client-side Imagemaps

Client-side Imagemaps

Client-side imagemaps use no server processing time and are completely server-independent. There are four steps involved in creating and using a client-side imagemap:

Prepare an image of type GIF or JPEG. There is nothing special about this file, it is simply a normal image.
Decide which area of the image will link to which URL. And decide whether the shape of each area will be a rectangle, a circle, or a polygon.
Use the map tags to define the imagemap. Do this within your HTML file.
Add an attribute value to the <img> tag, to tell the browser to use the image as an imagemap instead of a normal image.

Let's go through the last two stages in detail.

Defining an Imagemap

The map definition is a simple set of HTML tags which describe the x (horizontal) and y (vertical) pixel coordinates of each link in your imagemap. Every tag within the definition describes one link on the image. Map definitions should go at the start of an HTML file, in the head tag.

You will use three map tags:

<map name="mapname"> starts a map definition. This tag has one attribute: name. The name you are giving this map definition must be surrounded by quotation marks:
<area shape="shape-type" coords="X,Y" href="URL"> defines each clickable area on the image and its link. You can have lots of area tags within a map definition. The area tag has three attributes:
- shape defines the shape of the linked area. It can be one of the following rect, circle, poly, and point.
- coords are the coordinates of the linked area. This will be a series of numbers that define the area.
- href sets the link for the specified area.
</map> ends the map definition.

A map of a fish

Take a look at this image:

A map of a fish

Exercise

This is a practical exercise that needs is to be carried out in class.

Step 1: Create the HTML document

The aim of this step is to create a page of HTML containing a map definition for this fish image that allows the user to click on the eye, the fin, and the tail.

Copy the code below into an HTML file. Save the file as imagemap.htm and place it in a new folder called imagemap.

Step 2: The Fish

Save the fish image (above) as fish.gif and place it into the imagemap folder.

<html>
<head>

<title>My Nice Fish</title>

<map name="fishmap">
<area shape="rect" coords="1, 35, 45, 118" href="tail.htm">
<area shape="circle" coords="340, 74, 5" href="eye.htm">
<area shape="polygon" coords="190, 43, 152, 19, 113, 46, 126, 52, 190, 43" href="fin.htm">
</map>

</head>

<body>
<img src="fish.gif" width="374" height="164" usemap="#fishmap">
</body>

</html>

Each line describes a link shape, its coordinates, and the URL associated with it. Use your favourite graphics creation program to find the necessary X,Y coordinates.

Notice the word usemap. This tells the browser to use the image as an imagemap and which map definition to use. Remember that you need to use the # symbol.

Circles, rects and polygons
In the fish example the blue shaded areas indicate the use of three different shapes:

rect - this defines a rectangle. The numbers represent the left, top, right and bottom positions of the rectangle. The definition for the rectangle below is:
<area shape="rect" coords="5, 8, 15, 38" href="link.html">

A rectangle

circle - this defines a circle. The numbers represent the x and y coordinates of the centre of the circle (from the top and the left) followed by the diameter of the circle. The definition for the circle below would be:
<area shape="circle" coords="340, 74, 5" href="link.html">

A circle

polygon - this defines a shape with any number of sides. The numbers represent the x and y coordinates of all the points on the polygon. The definition for the polygon below is:
<area shape="polygon" coords="190, 43, 152, 19, 113, 46, 126, 52, 190, 43" href="link.html">

Notice how point A has its coordinates defined twice, once at the beginning to denote where the shape starts and once at the end to close the shape.

Exercise

Ensure to save all files created in this section to the imagemap folder.

Step 3: Create the HTML documents that the imagemap will link to.

Create 3 HTML files and name them tail.htm, eye.htm, and fin.htm.

Step 4: Check the imagemap works.

Open the file imagemap.htm that you created earlier, in your browser. Check that the hotspots and links work. (The blue shaded areas indicate the hotspots.)

Step 5: Identify the coordinates for two new hotspots

Open the fish.gif in your image editting software.

Select the bottom fin (shaded green) and identify the type of shape (rectangle, polygon or circle) that would be best to use.
Identify and note down the coordinates that make up the shape.
Repeat the method for the gill (shaded green).

Step 6: Add the hotspot information to the HTML file

Open the file imagemap.htm. Use the coordinate information taken from fish.gif and use it to add two additional hotspots on the fish imagemap.

Step 7: Create two new HTML files

Create two HTML files and name them gill.htm and bottomfin.htm. These are the files that the gill and bottom fin hotspots will link to.

Step 8: Check the imagemap works.

Open the file imagemap.htm in your browser. Check that the new hotspots and links work.

Previous page...

Christopher Ward London Limited