We want to add maps of South America and one of Central America + the Carribean on a page of a website. The two maps need mousover and a mouseclick effects or each country:
On rollover the color of the countries should change to a darker shade.
This map is a good example of what we need: [url removed, login to view]
The biggest difference is that on click we'd like to open up a window using shadowbox that will show a message that is separate for each country.
The Shadowbox script is already installed on the website since we use it for other pages on that site as well.
The total number of countries is 21.
I'd imagine some mix of jQuery, html5 and css3 to be the best solution.
The maps will replace the list of countries on this page: [url removed, login to view]
We want them to sit side by side just above the footer (max total width 740px).
The map has to work in all major browsers but of course not in IE6 :)