Question

Currently am using an interactive flash map on my website, which displays different colors for different states of US based on some data. I also have a mouseover feature to display additional data when user hovers over a state.

Are there any tools to achieve the above functionality without using flash (mobile compatible). I’m ready to pay for those tools if needed.

Answer 1

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.