How to create animated world map, like when you hover on it, a continent get highlighted and popup of selected countries appears

I am trying to find or create a world map, like when you hover on, a continent get selected and a pop up of selected 开发者_运维百科countries would appear, like the following website or similar: http://ilfc.com/customers.htm Do you know any source to download Ajax, jQuery or flash coded map and if to create what technology is the best to use?

I've done something like this before and used following technique.

First you need some images. The world map and a graphic for each highlighted country in the same resolution as the world map. The highlighted country must be on the same position as on the world map! The last image is a blank one.

Now create an imagemap which is containing the shape of the countries.

Next step, create three 'layers' which will lay on top of each other. The layer in the background will display the world map. The second one will display the highlighted country. On the top one use the blank image and the imagemap. Assuming that each area in the imagemap has the name of the country as the id, you could use following jquery based script:

$(document).ready(function () {
    $('#idoftheimagemap area').each(function () {
        $(this).hover(
            function () {
                //assuming it is an image
                $('#idofthehighlightlayer').attr('src', 'images/' + $(this).attr('id') + '.png');
            },
            function () {
                $('#idofthehighlightlayer').attr('src', 'images/blank.png');
            }
        );
    });
});

For the popup you could use qtip.

There are a bunch of Javascript web mapping packages that work across browsers and let you do this kind of thing. Try OpenLayers - all you need to do is supply the region boundaries as GML or some other supported format, then write your highlight and click handlers.

www.openlayers.org