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.

Half Size

• North East
• North West
• Yorkshire & Humberside
• West Midlands
• East Midlands
• South West
• South East
• London
• East Of England

Continue reading »

Follow me on Twitter

A quick note to developers that are styling elements that use monospace fonts (pre, code, q, etc). Be aware that some browsers, like Safari and Chrome, have their own fixed-width font size preference, which by default is set to 13px. This upsets proceedings when you apply a proportional (% or em) font-size to the body.

There are three solutions to counter this problem:

1. Apply font-size to each element separately
2. Remove monospace from the font stack and treat it as a variable spaced font
3. Use a fixed font size

Firefox and Internet Explorer have a single default font size so you can’t apply a larger size to monospace elements.

On the same subject, Google Chrome users can also set different default sizes for their serif and sans-serif fonts. By default these are identical so it will not affect the styling for the majority of users.