調出小部分圖像

我正在實施web應用程序。現在我有一個州的MAP image，我通過計算該區的座標來劃分其中的每個區。調出小部分圖像

以下是地圖圖像，我現在用：

enter image description here 而以下是座標點：

<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 district區，我能夠顯示新一頁。但現在我想要，當museser在浦那地區，浦那地區將帶來將看起來像「這是浦那地區」。

所以我怎麼能在JavaScript或jQuery中做到這一點。

任何幫助將不勝感激。感謝

來源

2014-10-19 PTech

這個問題還不夠清楚，請說清楚你到底想幹什麼。 – ProllyGeek 2014-10-19 14:41:43

@ProllyGeek - 其實，當我在特定區域上的鼠標上移動時，例如「Pune區域」。只有浦那地區的一部分會帶來一些看起來像這樣是「浦那地區」 – PTech 2014-10-19 14:47:01

你是什麼意思帶來，像工具提示？文字？圖片？或者是什麼？ – ProllyGeek 2014-10-19 14:47:54

在你的情況，你應該把你的地圖爲載體或SVG，aftrwards您可以填寫區，或hightlight，添加行程..等，這可以通過使用jvectormaps

具有良好的supposrt易做使用，您可以在這裏開始：

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

PS：你可以添加你自己要使用的自定義地圖。如果

來源

2014-10-19 14:55:01 ProllyGeek

檢查這些鏈接，你的意思是，你要亮點面積的onMouseOver事件，

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

Using jQuery to highlight a div, whilst greying out others

，如果你的意思是規模，增長或收縮，你可以用jqueryanimate

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

也看看下面的鏈接，

jQuery的規模：http://api.jqueryui.com/scale-effect/

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

來源

2014-10-19 16:01:24

您可以爲每個區域標籤的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>

要突出顯示浦那地區，您可以添加動態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>

來源

2014-10-19 16:28:25 user3617709

調出小部分圖像

回答

相關問題