HTML Hyper Text Markup Language: Image Maps

An image map is one image with multiple "clickable" areas. Image maps are useful for creating links on maps, diagrams, fancy buttons, etc. There are two ways of implementing an image map.

I . Server-side : Server-side image maps will work with any browser, but they are slower, because the server first has to do the translation, send the URL back to the browser, and the browser then has to request the URL.

II. Client-side : Client-side processing gets the browser to do the translation. This is faster from the user\'s point of view, since there\'s just a single fetch from the remote server.

A server-side image map is defined by its map file. This consists of a series of lines, one for each hot spot (clickable region) on the image map. Each line provides the following information:

• The shape of the hot spot

• Coordinates defining the shape

• The URL to which this hot spot points.

There are two different formats "NCSA" and "CERN", for map file referring to the servers which handle them.

Client-side servers use a MAP tag which is placed in the head region of the HTML file. This has an almost identical layout to a map file and it\'s a simple process to edit a map file into an HTML document to produce a MAP tag.

Use a mapping program to create a map file based on the chosen image. Map out the hotspots using one of these programs and select the desirable map file format.

Client-side maps

There are two components to a client-side image map:

• A \'MAP\' tag

• The \'IMG\' tag for the image

MAP tag example:

Every MAP tag must have a NAME attribute set, here in this example it\'s "sample".

Each AREA tag within the MAP tag should look like this:

SHAPE: This attribute can have possible values, "RECT", "POLY", "CIRCLE", or "DEFAULT". Default is used to give the URL to go to if the user clicks outside of the areas you have defined.

COORDS: The value of this attribute is a list of coordinates which define the area. Exactly what coordinates are given depends on the SHAPE. Default areas don\'t have coordinates.

IMG tag example:

Somewhere in the body of the HTML document you need to have an IMG tag to place your image. The ISMAP attribute tells the browser to treat the image as an image map. The USEMAP attribute says what MAP tag to use.

Server-side maps

Modern HTTP servers can handle image maps themselves. The IMG tag needs to have the ISMAP attribute to tell the browser to treat it as an image map; the tag points to the map file (and the value of the HREF attribute should point to the URL of the .map file - which need not be in the same directory or even on the same server as the HTML file).

Eg:

Older servers need to use a CGI program to decode the image map. This is usually called "image map" or "htimage". The exact syntax to use depends on how the site\'s server is set up.

Eg:

Dual-function maps

It is possible to set up an image map so that those browsers which can handle it will use client-side, and the others will use server-side. For this we have to produce both a MAP tag (and edit it into your HTML file), and a .map file (which we place on the server). The mark-up itself combines the two systems which we explained above.

Eg.

Here the anchor should be et up as you would for a server-side map and the IMG tag should be set up as for a client-side map.