Sign In| Join
Get Help:Ask a Question in our Forums|Report a Bug|More Help Resources
Last post Apr 16, 2012 05:47 AM by Phinehas
Member
27 Points
54 Posts
Apr 14, 2012 06:42 AM|LINK
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.
361 Points
238 Posts
Apr 14, 2012 07:17 AM|LINK
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.)
Apr 14, 2012 09:42 AM|LINK
Thanks for your reply.
Can you pls provide any sample code for this?
Apr 14, 2012 09:52 AM|LINK
<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.
Apr 16, 2012 05:47 AM|LINK
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>
jitendra2coo...
Member
27 Points
54 Posts
how to create interactive map using javascript and Css
Apr 14, 2012 06:42 AM|LINK
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.
Phinehas
Member
361 Points
238 Posts
Re: how to create interactive map using javascript and Css
Apr 14, 2012 07:17 AM|LINK
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.)
jitendra2coo...
Member
27 Points
54 Posts
Re: how to create interactive map using javascript and Css
Apr 14, 2012 09:42 AM|LINK
Thanks for your reply.
Can you pls provide any sample code for this?
Phinehas
Member
361 Points
238 Posts
Re: how to create interactive map using javascript and Css
Apr 14, 2012 09:52 AM|LINK
<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.
Phinehas
Member
361 Points
238 Posts
Re: how to create interactive map using javascript and Css
Apr 16, 2012 05:47 AM|LINK
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>