0

I am implementing web application. Now I have MAP image of one of the state and I have divide each district of that by calculation the co-ordinates of that district.

Following is the MAP image that I am using:

enter image description here And following are the co-ordinates points:

<area id="puneArea" shape="poly" coords="154,250,157,250,158,251,160,251,162,253,165,253,167,254,170,254,173,254,174,255,175,257,175,258,177,260,178,262,179,263,182,264,184,264,187,266,190,267,192,267,196,267,198,267,199,268,199,270,198,271,198,274,195,275,192,276,191,278,190,279,190,283,190,284,191,287,192,288,195,291,196,293,198,296,201,297,203,301,204,302,207,302,208,302,209,306,211,310,213,312,213,312,215,314,216,314,217,316,219,318,219,321,220,322,221,325,221,326,222,329,224,330,224,331,225,334,226,337,226,338,228,339,229,339,229,339,232,338,232,337,232,335,234,335,237,335,237,335,238,338,238,339,238,340,238,342,241,343,242,344,243,346,245,347,245,348,246,350,246,354,246,358,247,359,249,359,250,358,251,358,254,358,255,358,257,358,258,356,259,358,262,359,263,359,266,361,266,364,268,364,270,364,271,367,272,368,274,369,275,371,275,372,276,373,274,375,271,376,267,379,266,381,266,384,266,384,266,385,268,385,270,385,271,388,270,389,268,390,262,390,260,390,258,389,255,389,253,388,250,386,249,384,242,382,238,381,233,380,228,377,224,377,221,377,216,377,213,376,211,376,208,375,205,375,204,375,203,373,200,373,194,373,191,373,190,373,187,372,184,371,182,369,179,369,175,368,173,367,169,365,166,365,162,365,163,367,163,371,162,372,161,373,158,375,158,376,154,377,153,377,146,377,144,377,141,377,137,377,136,375,136,373,136,371,137,368,140,367,139,364,133,364,131,361,129,361,129,359,129,356,131,355,127,354,125,354,123,352,120,348,120,347,118,342,116,337,116,337,116,334,115,331,114,329,112,326,112,323,112,321,112,320,112,318,112,316,114,313,114,310,115,309,115,308,116,304,116,304,116,301,119,299,120,296,121,295,123,292,125,289,128,288,131,285,131,284,131,283,131,281,131,278,131,275,131,275,131,270,132,270,133,270,136,268,137,267,137,267,140,267,141,266,142,264,144,260,144,259,144,258,144,258,144,258
" href="pune.html" alt="Sun">

when I click on the Pune district area, I am able to display the new page. But now I want, when mouserOver on the Pune area, the Pune area will bring Up that will be looks like "This is pune area".

So How can I do this in javascript or in jquery.

Any help will be appreciate. Thanks

PTech
  • 163
  • 1
  • 11
  • the question is not clear enough , please clarify what exactly you want to do. – ProllyGeek Oct 19 '14 at 14:41
  • @ProllyGeek -Actually, when I over the mouse on particular district area for my example like "Pune area". Only that Pune area part will be bring some up so that look like this is "Pune area" – PTech Oct 19 '14 at 14:47
  • what do you mean bring up , like tool tip ? text ? image ? or what ? – ProllyGeek Oct 19 '14 at 14:47
  • @ProllyGeek - Bring Up means, I want when I mouse over on particular area, It fill like this is area you are selected like that. – PTech Oct 19 '14 at 14:52

3 Answers3

0

In your case you should treat your map as vector or SVG , aftrwards you can fill area , or hightlight it , add stroke .. etc , this can be done using jvectormaps

has nice supposrt and easy to use , you can get started here :

http://jvectormap.com/tutorials/getting-started/

P.S : you can add you own custom maps to be used.

ProllyGeek
  • 15,517
  • 9
  • 53
  • 72
0

Check these links if, you mean, you want to highlight the area onMouseOver event,

http://www.outsharked.com/imagemapster/

Using jQuery to highlight a div, whilst greying out others

and if you mean to Scale, Grow or Shrink, you can use jquery animate

http://docs.jquery.com/Effects/animate.

Also take a look at following links,

jquery scale : http://api.jqueryui.com/scale-effect/

Is there a way to grow/shrink an image on hover using Jquery?

Community
  • 1
  • 1
Protect Life Save Forests
  • 659
  • 1
  • 7
  • 21
0

You can create a onmouseover event for each area tag and pass the name of the region as parameter for the javascript function as below.

<area shape="rect" coords="0,0,82,126" alt="Sun" href="pune.html" onmouseover="PopName('Pune')">

And you could us the region parameter to display however you want. I have just popped an alert box for your reference.

<script>
function PopName(x) {
   alert("This is" + x);
}
</script>

To highlight Pune area, You can add dynamic css.

Below is a sample code. You can improvise it as per your web need.

<body>
<p id="p1" onmouseover="change()"></p>
<img src="https://i.stack.imgur.com/u5F7E.png" usemap="#newname">
<map name="newname">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="index.html" onmouseover="PopName('Mumbai')">
</map>
<div id="pop"></div>
</body>
<script>
function PopName(x) {
   document.getElementById("pop").innerHTML = '<img src="http://www.world-guides.com/images/mumbai/mumbai_city_map.jpg">';
   document.getElementById("p1").innerHTML = "This is " + x;
}
</script>
user3617709
  • 46
  • 5