The BBC News Map cleverly breaks England into 10 square-boundary regions, allowing them to make each region out of several <span> tags rather than one <area> tag. The use of the <span> tag means that each region can have more styles applied to it (such as background images and colours), making the development a little easier but, each region could only ever have square boundaries.

The map in this demo also covers Scotland, Wales and Northern Ireland – Scotland in particular is far from square and furthermore, I also want this technique of building an interactive map to be transferable to creating an interactive USA jQuery map where there are many more areas that require an accurate boundary for each state. So, in this demo, I have chosen to use the <area> tag over the <span> method because it allows us to draw a much more accurate boundary around each area.

Behind all the functionality, the BBC map consists of two images, a grey map of the UK and an orange one. When the user hovers over a <span>, the background image of that <span> changes to the orange map and the surrounding <span> tags remain grey.  The downside to the <area> tag is that we can’t apply styles to it, so instead, when we hover over an <area> tag, we will change the background image, not of the <area> but of the <img> tag. This will create a little more work as it means we have to have an image of the map, as well as an image for every area highlighted, totaling 13 maps altogether.

Using the <area> tag seems like a bad trade for the extra work we have to do but it will allow each area to be much more accurate and if you plan on using this demo to make a map of a bigger country, such as the USA, it would be impossible to create square boundaries around each state.

Creating the Maps

I used Adobe Fireworks to create the maps. As I decided to create 13 maps – rather than go down the <span> route – I kept the overall map simple.

I took a map of the UK and Ireland from Google Images and then using the pen tool, drew a basic outline around the coast of the UK and Ireland to make my own map. I added the grid over the top, much like the BBC’s Map. I then started filling each area to make the mouse over areas. The square grid meant I didn’t have to spend too long doing little jagged lines between each region plus I felt it was quite stylish and in keeping with the simplicity of the website it was originally designed for.

I exported each map using the gif format, this meant each map was around 4.5kb – all 13 maps total 58kb which isn’t bad! A Dial up modem user shouldn’t even have to wait too long to download that.

Read more:http://www.ianlunn.co.uk/blog/code-tutorials/bbc-news-jquery-map/