Image Maps help with Sizzling HTML Jalfrezi

Intro » Client-Side » Server-Side » FAQs » Links | Index » Contents

Introduction to Image Maps

This section describes how to create image maps within your HTML documents. Image maps are graphics which direct the user to resources or locations by clicking on areas of the image. There are two types; server-side and client-side. With both kinds of image map, you display the image as normal using the <IMG> tag. You also provide a map of the graphic to tell the browser which coordinates of the image lead to which location.

Client-side image maps are interpreted by the browser itself, implying that the image map will only function with a compatible browser. Server-side image maps are interpreted by a suitable processing script on the web server (contact your ISP to find find out if they have such a program). This means the user must be on-line for the image map to function, it also means that they will work whichever browser is used. As client-side image maps do not not need to contact the server and run a separate program to function, they are significantly quicker in operation.

Netscape Navigator 2 upwards, Microsoft Internet Explorer 3 upwards and Spyglass Mosaic can all interpret client-side image maps, I would therefore recommend client-side as the way to go, although you must appreciate that you may be alienating users with older browsers. For this reason, and for non-graphical browsers, you should always provide a text-based alternative for your image maps - failing to do this could mean potential readers cannot navigate your site and go elsewhere.

The following sections will guide you in the use of both server-side and client-side image maps.

Specific Markup

<USEMAP>, <ISMAP>, <MAP>, <AREA>

Client-Side Image Maps

Having chosen a suitable image, you need to display the graphic on the screen and tell the browser that it is an image map. To do this you use the <IMG> element with the USEMAP attribute. You then need to write a MAP file. The map tells the browser which areas of the image lead to which destination. Maps can be written in any text editor and are often included at the end of the <BODY> section of an HTML document. You can also store the map as a separate file, although this is not widely supported.

The following example of an image map lets you jump to a comedy hero of your choice. It will be explained afterwards, so don't use it yet!

<IMG SRC="graphics/nitesky.jpg" BORDER=0 WIDTH=400 HEIGHT=161 ALT="Comic Heroes image map - just an example so no text alternative I'm afraid" USEMAP="#nitesky">

The USEMAP attribute contains the location of the map file and uses the same syntax as the HREF attribute of the <A> element. In this case the corresponding map file, nitesky, is contained within the HTML document and a # is used to indicate this. If the map was contained separately in a graphics directory, the USEMAP attribute could read something like USEMAP="graphics/nitesky.map".

The map file, nitesky, is:

<MAP NAME="nitesky">
<AREA	SHAPE="rect"
	COORDS="250,58,386,153"
	TARGET="imagemap_out"
	HREF="http://www.boehme.demon.co.uk/phil/rm/rm.html"
	TITLE="Vic and Bob">

<AREA	SHAPE="circle"
	COORDS="199,44,40"
	TARGET="imagemap_out"
	HREF="http://www.harryhill.com/"
	TITLE="Harry Hill">

<AREA	SHAPE="polygon"
	COORDS="11,129,11,18,63,9,146,25,146,129"
	TARGET="imagemap_out"
	HREF="http://www.comedyzone.beeb.com/fastshow/"
	TITLE="Fast Show">

<AREA	SHAPE="default"
	NOHREF>
</MAP>

The map file explained

The elements of the map file are explained below. Use the above example to see how they are implemented.

<MAP></MAP>

These tags contain the map definition and must be used with the NAME attribute.

NAME="text"

Provides a unique name for the image map file, as referenced by the USEMAP attribute of the <IMG> tag displaying the image map.

<AREA>

Used to define part of an image as a live area. Any number of <AREA> tags may be specified. If two areas intersect, the one which appears first in the map definition takes precedence in the overlapping region.

SHAPE="rect | circle | poly | default"

Defines the shape of the live area as a rectangle, circle, polygon or the remaining undefined image. All but the latter require the COORDS attribute. Setting the value to default means the <AREA> tag is applied to the image space outside of the other specified areas.

HREF="URL"

Used to specify the link destination for the live area. Takes the same syntax as the HREF attribute of the <IMG> tag.

COORDS="x1,y1,x2,y2 | x,y,r | x1,y1,x2,y2,x3,y3..."

Defines the precise position of the live area using coordinates in pixels separated by commas. A rectangle is described by coordinates of the top-left and bottom-right corners of the rectangle. A circular area is described by coordinates of its centre followed by its radius. A polygon is defined by coordinates of all the corners of the polygon. In the example, a ten-sided shape was used to approximate the duck's head. The COORDS attribute is always required for the SHAPE attribute, except when it is set to default. Remember that (0,0) is top-left, not bottom-left as you might expect.

NOHREF

Used to specify an area as not live. The example above uses this attribute to define the area outside those specified to have no function.

TITLE

MS Internet Explorer 4 upwards only. Used to provide a 'tool tip' for the link, which pops up when the mouse is moved over the hot spot.

TARGET="frame_name | window_name"

This allows the destination of a link to be loaded into a predefined frame or window. If there is no frame with the specified name then the link will be loaded into a new browser window with that name. For more information, see the detailed section on Frames.

There are a couple of ways to find coordinates of areas on your image. First of all, you could set the graphic as an image map as described above, but use the ISMAP (see server-side) attribute instead of USEMAP. Load it into your browser; move the mouse cursor over the image map and coordinates should be displayed at the bottom of your browser window (assuming you're using a graphical browser). Simply jot down the coordinates corresponding to your hot area and type them into your map file. This procedure can also be performed using a graphics package such as the excellent Paintshop Pro external link .

Client-side image maps can also be automatically generated using the wonderfully simple CoffeeCup Image Mapper++ external link .

Server-Side Image Maps

Server-Side image maps are quite easy to set up, but require your access provider to have the relevant processing script (contact your ISP to find out). As with client-side image maps, having chosen a suitable image you need to display the graphic on the screen and tell the browser that it is an image map. To do this you use the <IMG> element with the ISMAP attribute. You then need to place the image within a link to the relevant .map file. This is the chief difference between coding for client-side and coding for server-side image maps. The precise syntax of the map file depends on your ISP's image map processing script. As an example you could have a look at the CIX Image Map tutorial external link .

The code to display the above example as a server-side image map is:

<A HREF="graphics.nitesky.map"> <IMG SRC="graphics/nitesky.jpg" BORDER=0 WIDTH=400 HEIGHT=161 ALT="Comic Heroes image map - just an example so no text alternative I'm afraid" ISMAP> </A>

Unfortunately the example won't work as my ISP does not have an image map processing script, however if your run your mouse over the image you should see the map coordinates appear at the bottom of the browser window (assuming you're using a graphical browser).

Frequently Asked Questions

Is the any software available to automatically produce image maps?
CoffeeCup's Image Mapper++ external link is a wonderfully simple way to automatically produce client-side image maps.

Useful References

The CIX server-side image map tutorial
Coffee Cup Image Mapper++ - wonderfully simple client-side image map software
JASC Paintshop Pro

Introduction to Image Maps

Specific Markup

Client-Side Image Maps

The map file explained

<MAP></MAP>

NAME="text"

<AREA>

SHAPE="rect | circle | poly | default"

HREF="URL"

COORDS="x1,y1,x2,y2 | x,y,r | x1,y1,x2,y2,x3,y3..."

NOHREF

TITLE

TARGET="frame_name | window_name"

Server-Side Image Maps

The code to display the above example as a server-side image map is:

Frequently Asked Questions

Useful References