[HTML]

Image Maps

Important tags and attributes:
<IMG ... USEMAP="..." ISMAP>
<MAP NAME="...">
<AREA SHAPE=... COORDS=...   HREF=...>
<AREA ... >
</MAP>

There are two kinds of image maps: server-side and client-side image maps. The server side image map was the first to be implemented. The coordinates of a mouse-click in an image are transmitted to the server which converts it to a link and returns the contents. Such maps have to be installed on the server by the system programmer. The client side image map was implemented later and is more convenient. The HTML page contains a specification of areas in the image and these are associated with links by a <MAP>. The browser detects the intended area and follows the appropriate link. An example of a client side image map is given below.


ImageMap image The image contains two areas which are hyper-links: area 1 (red) and area 2 (black). Clicking in those areas will cause the links to be followed. There is no significance to the browser in the areas matching the coloured rectangles - that was done only to make aiming easier. (There is a third area.)

The image happens to be a gif (good for block colours) but it could just as well be a jpg.

[Source HTML here.]



Copyright © L. Allison, Department of Computer Science, Monash University, Australia 3168 / 1997