只在html上點擊圖像上的不透明區域

-2

我希望我的img只能點擊它的非透明區域，因爲它可以阻止背後的圖像。例如，當我點擊北法國時，它會選擇德國。這怎麼可能？我有這樣的事情，所有的國家都是在HTML頁面上的圖像。只在html上點擊圖像上的不透明區域

這裏是我的網站上的圖像：

2016-01-12 B.ÖNER

你可以用一個多邊形分配[圖像映射（https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map）'area'到所需的國家，然後將點擊事件分配給該「區域」而不是整個圖像。 – Blazemonger

你的圖像是JPEG。它沒有透明部分。但是，將不同的操作分配給不同區域的最簡單方法是使用圖像映射。我用this online tool來創建對應於法國和德國的區域。您應該能夠在幾分鐘內爲所有其他國家創建區域。

<map name="Map" id="Map"> 
 
<area alt="" title="" href="#" shape="poly" coords="248,165,275,136, 
 
    316,127,327,117,314,96,321,77,337,68,344,68,336,90,332,97,335,114, 
 
    352,120,373,111,387,125,394,163,361,175,367,193,378,198,368,205,369, 
 
    215,363,214,350,226,323,240,288,238,312,197,274,185" 
 
    onclick="alert('Germany'); return false" /> 
 
<area alt="" title="" href="#" shape="poly" coords="159,199,194,202, 
 
    196,186,202,184,218,192,235,179,236,169,249,167,277,186,314,197,289, 
 
    235,302,239,304,274,292,286,260,281,250,298,222,289,215,291,193,285, 
 
    202,256,196,232,175,216,159,213" 
 
    onclick="alert('France'); return false" /> 
 
<!-- et cetera --> 
 
</map> 
 
<img src="http://i.stack.imgur.com/pGuAF.jpg" alt="" usemap="#Map" />

來源

2016-01-12 20:03:19

只在html上點擊圖像上的不透明區域

回答

相關問題