This photo from a h2g2 London Meet in 2008 has been enhanced with a clever HTML feature. If you hover your cursor over the faces of the lovely ladies, you will see their names, and if you click them you will be taken to their h2g2 Personal Spaces.

So, How Does It Work?

It uses a bit of HTML coding which you can type into the Guide-ML code for the Entry. You just need to use some special tags to define clickable areas in your picture. The process is a little bit involved, but once you've worked out all the details, the result should be well worth the effort. Here's a step-by-step guide:

First, you will need to know how big your photo is (measured in pixels), where you want to have clickable areas on it, and how large the clickable areas should be.

Download the picture to your PC (right-click on it and save it somewhere), then load it into a graphics editor (I use Microsoft Paint). When you pass your cursor over the picture, then Paint shows the coordinates of the pixel you are on.

For the above picture, I found that Titania's face was centred around the pixel (130,84) - that is, 130 pixels from the left and 84 from the top of the photo. I wanted a clickable area which was a circle around Titania's head, so I moved the cursor to the right of her head and found that this circle would have a radius of around 50 pixels. I then did the same for Lil and B'Elana.

Next, decide how you want each area to be labelled, and which h2g2 page you want it to link to if you click on it.

For the London Meet picture, this was obvious. I label each area with the Researcher's name and link to their Personal Space.

Finally, you need to edit the Guide-ML of your Entry and add the following HTML bits and pieces:

• a 'USEMAP' definition inside your image <IMG> tag;
• a 'MAP' tag which defines the mapping;
• and within the <MAP> tag, 'AREA' tags which define each clickable area.

Here's the code I used:

Other Shapes

You don't have to have circle-shaped clickable areas. You can define rectangles and polygons, too. This is the syntax you would use inside the AREA tag:

Rectangles

<AREA SHAPE="rect" COORDS="left,top,right,bottom" ALT="(whatever)" HREF="(linked entry)" />

Polygons

This is a bit more complicated - you can define any shape you like by drawing a straight line between a series of coordinate values, so a triangle might go from (50,50) to (75,75) to (75,25).

<AREA SHAPE="poly" COORDS="x1,y1,x2,y2,...,xn,yn" ALT="(whatever)" HREF="(linked entry)" />

Resized Images

One word of warning: If you resize your images using the HEIGHT and WIDTH attributes inside your IMG tag, then you will need to rescale the coordinates for the AREA tags too. You might need to get your calculator out for this, but the principle isn't too difficult. Here's an example, where I resize the London Meet photo to 200 pixels wide:

Now, I know from Paint that the photo is 500 pixels wide. So I'm reducing it to two fifths of its size. The coordinates of Titania's circle need to be changed to 130*200/500, 84*200/500 and 50*200/500, or (52, 34, 20). The other circles are similarly rescaled. Here's the code:

And here's the reduced clickable photo:

Finally, if you're changing both the length and the width (which may make your photo look very odd!) than you will need to rescale the x-coordinates and y-coordinates separately.

Have Fun!

So why not give it a go? This feature should be useful for h2g2 meet photos, as we've seen, but there will be other applications too. Maybe a picture of a person divided into areas which link to h2g2 entries on parts of the body, or a geographical map showing entries about particular towns or countries. Let me know your ideas.

If you create any good examples of clickable images, then let me know and I'll link to them!