CSS + HTML custom shape buttons

I'm developing a game, it d开发者_如何学JAVAisplays a map with clickable countries. The fact that you can click on countries is giving me a headache. I can use an image per country and use absolute positioning and attach an onclick event, however, I'd have to stream 100 images to each user, I'd be unable to use sprites and a couple more things. I could mess with javascript, but I'm guessing it's going to be a real mess. Is there any other way to implement this? Perhaps simpler, more elegant?

You could use SVG maps, Wikipedia has plenty available: http://en.wikipedia.org/wiki/Wikipedia:Blank_maps

And here's an example of clickable geography in SVG: http://raphaeljs.com/australia.html

Use an plain old HTML image map. This allows you to specify parts of the image as polygons, each of which are distinct clickable links.

(You may have heard statements that you should not use image maps for accessibility reasons — this is irrelevant, as do-it-yourself options like CSS sprites are worse for this purpose.)

You can use jVectorMap plugin for displaying interactive world map. It's based on vector graphic (SVG and VML), works great in all browsers.

Have the client load one single image and use CSS sprites to display each individual country.