Images

Hot-spots properly called image mapping. This is how the names are made to appear when the pointer hovers over a face in a photograph.

This example picture shows the image mapping areas while you hold the mouse button down where there is a name. Also note the order of the overlapping hot-spots. For example Tony Bradley before John Ashworth before Derek Jordan (Dougal).

You clicked on no-one.

Photo from the Falcon Hotel, Uppingham

Inside the image tag add a "usemap" parameter that points to a "map" of the picture. usemap="#pic1" (make sure you put the # at the start of the map reference).

Here is a typical map - damn complicated ain't it!

<map name="pic1">

<area shape="rect" coords="374,57,418,333" nohref alt="Bill Marshall">

<area shape="rect" coords="74,63,126,309" nohref alt="Wombat" title="We knew him as">

<area shape="rect" coords="148,49,218,317" nohref alt="3">

</map>

Area coordinates are a pain to work out. Luckily there are free programs to be found on the internet to write them for you. I use the Paint Shop Pro File > Export > Image Mapper. Just be sure not to save over the top of your original image!

The map definition is named without the #.

The areas can be rectangular circular or polygonal.

Rectangular coordinates are x-y locations of top-left and bottom-right of the hot-spot. Circles are coordinates of the centre and the radius. Polygons are a series of x-y coordinate pairs that trace round the outline.

Hot-spots are usually used as links. In that case there will be an href="address" in the area. The map of Great Britain on the Club Runs page has places linked to appropriate club runs pages. If we don't want a link put nohref.

That's not all folk! When the page has opened, JavaScript finds area tags then lists, sorts and filters the names in the alternative text field and shows the list of people on the page (also the past members mentioned in the text). At the same time onMouseover events are added to the area tags that combine the alternative text plus the title text. When the pointer hovers over Chris Hodkins the tooltip says "Chris Mansell now Chris Hodgkin". When the name is not known the "alt" is a number that shows in the tooltip. Clicking this area slides out the Contact Form and invites you to name the geezer. Click the rascal squatting on the floor.

On pages where the images are not genuinely mapped, put a "dummy" map definition with areas as the following example. This will ensure that the names are listed even though the images do not have tooltips.

<map name="dummy">
<area alt="Joe Soap">
etc...

Turn over a new leaf.
Summary

Area alt text is used to produce tooltips and a list of names.

The status line shows combined title and alt text.

Numbered areas ask for information on the identity of the person.

1 Steve White Tony Bradley Mick Ayriss Ian Goodson Helen Ayriss Roland Potter Clive Hodgkin Chris Hodgkin John Ashworth Derek Jordan Terry Riddle Martin Sentance