Image map rollover effects using jQuery?s MapHilight plugin

So I want to make a big map of europe that highlights 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 is possible to use an ordinary HTML image map to define some pretty complex shapes, and let?s face it, shapes do not get much more complex than this. OK, so it is possible to create clickable areas in HTML using an image map, but how do I add rollover effects to this? CSS did not 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 am going to try and record everything I do, in the hope that someone else might find this useful, so here goes.
Web Site