Adding an image map

An image map is a single picture that contains several links to other pages. It can be map, with links to further details about specific areas, but it doesn't have to be. It can be any picture you like. You set up the links on your image map by defining hotspots. There are three standard shapes for hotspots: circle, rectangle or polygon. You can include any or all of these shapes on your image map, depending on the area that a hotspot covers.

You can use image maps in two ways: put the image map information in your page (client-side) or store the image map information on a server (server-side).

With both kinds of image map, you use the <img> tag to display the picture and you also supply a map of the image to tell the browser which part of the picture links to which destination. The main difference is that the browser interprets client-side image maps while you need a program on your web server to interpret server-side maps.

Client-side image maps do have some advantages:

• They are quicker. The browser processes the click information and picks the appropriate destination. It doesn't have to go back to the server
• They are easier to create because you don’t need any scripts. If you store image map information on a server, you need a script or other service on the server to process the click information

The drawback is that some older browsers don't like them but I doubt this is an issue. We would probably use client-side image maps but I've included a section on both types.

Setting up a client-side image map
Setting up a server-side image maps