how to create interactive map using javascript and Css

I have world map image in my website http://apolloexim.com/index.htm. with two branches. Currently this is only an image. I want to add one more location and make it interactive like this http://www.imapbuilder.com/map-templates/

How can I do this using java script? Pls provide sample code if possible.

Is there any other way to do this?

Thanks in advance.

Re: how to create interactive map using javascript and Css

To select the country in map, you can take a look at http://www.javascriptkit.com/howto/imagemap.shtml.

We can use <map> and <area> to define the polygon (country). You can also try to add some javascript in <area> to add the effect. (I think it should work using javascript inside area tag.)

Re: how to create interactive map using javascript and Css

Thanks for your reply.

Can you pls provide any sample code for this?

Re: how to create interactive map using javascript and Css

<html>
<body>
    <map name="FPMap0">
    <area href="http://www.lycos.com" shape="rect" coords="6, 120, 63, 137" onmouseover="alert('Mouseover Event')">
    <area href="http://www.nba.com" shape="rect" coords="5, 96, 65, 113" onclick="alert('Onclick Event')">
    <area href="http://www.yahoo.com" shape="rect" coords="6, 75, 66, 87">
    <area href="http://www.cnn.com" shape="rect" coords="8, 48, 61, 62">
    <area href="http://javascriptkit.com" shape="rect" coords="8, 24, 65, 38">
    </map>
<img rectangle=" (6,75) (66, 87)  http://www.yahoo.com" rectangle=" (8,48) (61, 62)  http://www.cnn.com" rectangle=" (8,24) (65, 38)  http://javascriptkit.com" src="http://www.javascriptkit.com/nav1.jpg" width="70" height="167" border="0" usemap="#FPMap0"></p>

</body>
</html>

In this sample, (referred link: http://www.javascriptkit.com/howto/imagemap.shtml), if you click "NBA" or move to "Lycos", message will be prompted.

Re: how to create interactive map using javascript and Css

Or this may be simpler:

<html>
<body>
    <img src="http://www.javascriptkit.com/nav1.jpg" width="70" height="167" border="0" usemap="#FPMap0">
    <map name="FPMap0">
        <area href="http://www.lycos.com" shape="rect" coords="6, 120, 63, 137" onmouseover="alert('Mouseover Event')">
        <area href="http://www.nba.com" shape="rect" coords="5, 96, 65, 113" onclick="alert('Onclick Event')">
        <area href="http://www.yahoo.com" shape="rect" coords="6, 75, 66, 87">
        <area href="http://www.cnn.com" shape="rect" coords="8, 48, 61, 62">
        <area href="http://javascriptkit.com" shape="rect" coords="8, 24, 65, 38">
    </map>

</body>
</html>