A tutorial for producing these maps will be provided soon. With the help of InkScape and a spreadsheet, they are not quite as fiddly as you would expect. Each map consists of a single image, with all the roll-over images as a part of the main map image.
It uses a ‘sprite’ technique to move the roll-over background images into position when the mouse hovers over the [square] regions. Why do it like this? Firstly there is no JavaScript involved. Secondly it keeps the number of objects downloaded to a minimum – just one stylesheet (or set of styles) and one image. Lastly, it degrades nicely to a simple unordered list when CSS is not available or relevant.