If you surround an image (IMG) tag with an anchor (A) tag, the image will become "live" so that if the user clicks anywhere on the image, they will be taken off to the target URL. This mechanism is simple and works well, and is appropriate in most cases. However, if you want different parts of an image to be associated with different URLs, a greater degree of sophistication is required. There are essentially four options available:
Join several images together: If the different areas on your image are rectangular, you might be able to split the image up into smaller images each of which can be enclosed within a separate anchor. The smaller images can then be abutted using a table construct (or some other trick to avoid creating space between the images) so that they look like a single image. This simple approach avoids image maps and can be used in a surprising number of cases. However, it's really a special case solution.
Client-side image map: A client-side image map consists of a block of text that defines zones on an image and URLs associated with each zone. The image map text is embedded in the HTML of a web page. When the user moves the mouse over the image, the browser (which possesses the map in the page) displays the target URL for the zone under the mouse. If the user clicks on a zone, the browser goes directly to the associated URL specified in the map.
Server-side image map: A server-side image map consists of a block of text that defines zones on an image and URLs associated with each zone. This text is held by the webserver serving the page containing the image. When the user moves the mouse over the image, the browser displays the coordinates of the mouse within the image. If the user clicks, the coordinates of the mouse are transmitted to the server. The server then refers to its image map and refers the browser to the corresponding page.
Java: If you're prepared to write a Java program, you can get the program to display an image and then react in different ways to clicks on different parts of the image. While providing extra flexibility (e.g. you could play a sound upon a click) this solution is overkill if you just want to associate different URLs with different parts of an image.
Of these four choices, the standout winner is the client-side image map. Client-side image maps have the following advantages:
To find out how to create a client-side image map see the Client-Side Image Map Page.
Server-side image maps won't be discussed further.
Webmaster: ross@ross.net