Javascript 把图像的一部分拿出来

Javascript 把图像的一部分拿出来,javascript,jquery,css,3d,Javascript,Jquery,Css,3d,我正在实现web应用程序。现在我有了一个州的地图图像,我通过计算该州的坐标来划分该州的每个地区 以下是我正在使用的地图图像: 以下是坐标点: <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,26

我正在实现web应用程序。现在我有了一个州的地图图像,我通过计算该州的坐标来划分该州的每个地区

以下是我正在使用的地图图像:

以下是坐标点:

<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">

当我点击
Pune地区
区域时,我能够显示新页面。 但现在我想,当鼠标在浦那地区移动时,浦那地区会出现“这是浦那地区”

那么如何在javascript或jquery中实现这一点呢

任何帮助都将不胜感激。
谢谢

在您的情况下,您应该将地图视为矢量或SVG,然后您可以填充该区域,或者高亮显示该区域,添加笔划。。等等,这可以使用

有很好的支持和易于使用,您可以从这里开始:


备注:您可以添加自己的自定义地图以供使用。

如果您想在Mouseover事件中突出显示区域,请检查这些链接

如果您想缩放、增长或收缩,可以使用jquery动画

再看下面的链接,

jquery scale


您可以为每个区域标记创建onmouseover事件,并将区域名称作为javascript函数的参数传递,如下所示

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

您可以使用region参数来显示您想要的内容。我刚刚弹出了一个提醒框供你参考

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

函数PopName(x){
警报(“这是”+x);
}
要突出显示Pune区域,可以添加动态css

下面是一个示例代码。你可以根据你的网络需要即兴创作

<body>
<p id="p1" onmouseover="change()"></p>
<img src="http://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>

函数PopName(x){ document.getElementById(“pop”).innerHTML=''; document.getElementById(“p1”).innerHTML=“这是”+x; }
这个问题还不够清楚,请澄清你到底想做什么。@ProllyGeek-实际上,当我在特定的区域上鼠标悬停时,比如“Pune area”。只有Pune区域的部分会被提出来,所以看起来像是“Pune区域”,你说的提出来是什么意思,比如工具提示?文本?形象?或者什么?@ProllyGeek-ching的意思是,当我把鼠标移到某个特定区域时,它会像这样填充,就像你们被选中的区域一样。