点击不同的透明PNG's.哪个被点击了

Click on different transparent PNG's. Which one is clicked?

本文关键字：透明 PNG 更新时间：2023-09-26

我正在尝试创建一个国家的地图，划分为不同的省份。当我的产品在某个省份上市时，这些省份就会在地图上亮起。然后我希望人们能够选择一个省份并点击它。

我想这样做:我用深色画出了整个国家的背景2)每个省都有一个单独的浅色透明png3)当我的数据库检测到有产品时，它会显示背景图像+各省的浅色图像

问题是:我希望浅色图像是可点击的，但所有图像的画布将重叠。有什么办法可以做到这一点吗?它应该在所有主要浏览器中工作，最好不要使用图像映射。我想将可点击区域链接到PNG图像的非透明部分。

我希望这有一点意义，提前感谢。

一个选项是只创建您的world图像和另一个hittest图像，其中所有省份都是不同的颜色。当用户单击某个地方时，您可以获取所单击像素的颜色，并将其与省份关联起来。所以你的hittest图像，例如，德克萨斯州是红色的，加利福尼亚州是蓝色的，纽约是绿色的。当你点击时，你只需要找出颜色，这就是你的状态。

至于获取鼠标下的像素颜色，canvas可以做到。然而，

你可以注册点击只在整个图像，而不是它的彩色部分。为了让你的地图更准确，你必须使用canvas或flash。

<img>标签是可点击的，它的正方形大小，没有关系，如果部分图像是透明的。即使你点击图像的透明部分，点击事件也会发生。

为了解决这个问题，请查看HTML IMAGE MAP <area> HTML标签(谷歌一下)，并有选择地告诉浏览器您想要应用某些事件的图像的哪个部分。

Click也将传播到相同位置的底部元素。这意味着，如果您不停止使用e.stopPropagination();

进行传播，则始终单击<body>。

如果您不想要图像映射，您可以将不可见div 放在可点击区域的顶部形状。但我可能会用image maps