For a mobile compatible site, you'll have to use Javascript.
JQuery is a great place to start if you've not done much with Javascript before. It will give you fairly easy mechanisms to handle the mouseover events and the popups.
You can try to arrange all of the state images using HTML and CSS, but you might also want to look at the HTML 5 Canvas element. It works in most modern browsers, and there's a hack to make it work in IE.
Depending on how you do it, you may also want to learn about image maps. There are lots of tools to help with the creation of image maps.
UPDATE
I was working with some charts, and came across this example using a JS library called Raphael. This seems an awful lot like what you're looking for.
Also I realized as I was looking at that example that if you're coding for a mobile touch screen device (iPhone, iPad, Android, etc.), you won't have a "hover" event (for obvious reasons). You might want to try to detect if the browser supports "hover", and if not, do your animations on "click" instead.