Update: you can see the finished version of my map here.
So I want to make a big map of europe that hilights the different countries when you move your mouse over them. Initially I thought this would be really easy using a bit of CSS and :hover . . . . no dice. But to my surprise I found out that it’s possible to use an ordinary HTML image map to define some pretty complex shapes, and let’s face it, shapes don’t get much more complex than this.
OK, so it’s possible to create clickable areas in HTML using an image map, but how do I add rollover effects to this? CSS didn’t seem to work so my next port of call was the wonderful jQuery. I found a plugin call mapHilight that takes an HTML image map, and adds some javascript hilighting wizardry to it. You can see a really cool example using a map of the states, this is almost exactly what I want but for Europe. I’m going to try and record everything I do, in the hope that someone else might find this useful, so here goes.