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

Full Size with Picture Roll-Overs

You are not limited to colours in the roll-over. You can add whatever images you like. If using PNGs (as we are here) you can even include alpha-transparency to overlay the main map with a semi-transparent roll-over image.

Since this demo uses PNGs, Internet Explorer 6 (and below) users may see grey-blue backgrounds around the images. You can work around this by using GIF images instead. However, I would encourage IE6 users to upgrade in the first instance.

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

Credits

• Whitby Abbey
• Birmingham Bull
• Kent Coast
• Norfolk Windmill

The rest are my own snaps: Catbells, Drax Power Station, Angel of the North, a member of the Queen’s Guard and a Clapper Bridge in Cornwall.

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.