Many of the pictures on the site start off as photographs that are much bigger and better definition than can be seen on a compressed version only 540 pixels wide. On the site the people in group photos are hardly recognisable. To show these past members more clearly without resorting to huge images that need to be scrolled off the screen you can add zoomable images that retain identifying name maps.

There are two types of zoomable images. The first has a fixed magnification and is signified by a image, usually in the top right corner.

Moving the mouse pointer over the image produces a frame that indicates the area that will be magnified if the picture is clicked. Clicking again reduces the picture to the original size.

The HTML is written by JavaScript to simplify writing the code. All you need to put on the page is...


The first argument "picname" is the name of the photo file. It must be in the "photos" subfolder of the page and don't put ".jpg" on the end in the script.

The next argument (4 in the example) is the magnification.

This is going to be a big image taking time to open. The image needs to be the full size it is going to be zoomed to. eg a 4x zoom of the example dimensions needs an image 2160x1512px.

If the image is the standard 4:3 aspect ratio it doesn't need the third argument. But if it is not going to be the default 405px high then you need to say what it will be ... 378 pixels in the above example.

Map areas should be constructed for the small (540px wide) picture and the map name should be the same as the picture file thus ...

<map name="picname">
<area shape="CIRCLE" coords="125, ... etc

When the picture is magnified the tooltips will show in the correctly magnified positions.

The second type of zoomable image responds to rolling the mouse wheel. Because the strength of magnification depends on the amount the wheel is rolled it is too complicated to include image maps to show the names of people.

Again the HTML code is written by JavaScript thus ...


This time the picture file is specified with the path - preferably the "photos" folder - and the filename is just the stub. It must be a JPEG (.jpg) file so don't add that to the argument.

Magnification is variable but goes up to a maximum 4x. The picture ratio must be 4:3, starting at 540x405px. The actual image needs to be about 2160x1620px.

One proviso to the rolling zoom is that you need to add prime_zoom(); to the pageInit function to make it work.

Publish and be damned

The zoom features are site specific and depends on JavaScript and cascading style sheets.

Group photos with a magnifying glass can be made larger and retain the image mapping tool-tips.

Some images can be rolled into to make them larger.

Larger images takes longer to open.

Dave Smith Phil Freestone Clare Scrivens Sue Farmer Martin Johnson Richard Townsend 7 8 9 Colin Townsend 11 12 Trevor Evans