在 html 上仅单击图像的非透明区域

Question

我希望我的 img 仅在其非透明区域可点击，因为它会阻止图像 behind.For 例如，当我点击法国北部并选择德国时。这怎么可能？我有这样的东西，所有国家都是 html 页面上的图片。

这是我网站的图片：

Answer 1

您的图片是 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" />

在 html 上仅单击图像的非透明区域

Clicking only non-transparent area of the image on html

html

javascript

pixel

pixel-perfect