Multiple links in an image

School of Geography, University of Leeds

You can use an image tag rather than text in a link, as long as you supply an alt attribute in the IMG tag.

For example...

<A href="message.html"><IMG src="planet.jpg" alt="Photo: A small blue planet, linked to a video (2Mb)."></IMG></A>

However, a more interesting variation is to have an image in which different areas on the image can be clicked to go to different places. For example, you might want to produce a map of an area with pages for each town. Such an image is known as an Imagemap.

Note in the above, that we also give text links for blind browsers

Imagemaps consist of an image tag and a set of tags giving the coordinates of shapes in the map that link to various pages.

You may hear about 'server-side' imagemaps. It used to be the case that the coordinate tags were never transfered to the user and the web server dealt with the conversion of mouse position to page (a 'server-side' imagemap). Now the coordinate information is in the html file that includes the image reference.

Modern browsers overlay the coordinate information invisibly over the image and sort out which page is being referenced (a 'client-side map').

The image tag for a client side map looks like this...

<IMG src = "some_images.gif" alt = "client side imagemap" border=0 usemap = "#whatever_name"></IMG>

Where 'whatever_name' is whatever you want and border=0 gets rid of the blue border the imagemap would otherwise have.

The coordinate information

This is usually put after the page's closing </HTML> tag, and looks something like this...

<MAP name = "whatever_name">
<AREA shape = "rect" alt = "Link to somewhere" coords = "51,465,256,488" href = "some_address">
<AREA shape = "default" nohref>
</MAP>

The coords are x,y pairs for the top-left and lower-right corners of the rectangle. The area shape could also be a circle or a polygon in which the last coordinate is the same as the first. The default shape sets the default page to go to if an area outside the other shapes is selected. In this case it is set to nohref, which stops the browser going anywhere or doing anything odd if somewhere without a reference is selected. No one in their right mind would actually type in all the required shape information and coordinates, and from early on this job has been automated. There are now a number of excellent software tools that make the job far more pleasant.

As an example, you could use an imagemap of your mates in a photo to link to their homepages. People who have seen you around are far more likely to recognise a face than a name.