单击不同的透明PNG。哪个被点击了？答案

【问题标题】：Click on different transparent PNG's. Which one is clicked?单击不同的透明PNG。哪个被点击了？
【发布时间】：2011-09-02 21:07:49
【问题描述】：

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

我正在考虑这样做： 1）我有整个国家的深色背景 2）每个省都有一个单独的浅色透明png 3）当我的数据库检测到有货时，会显示背景图+各省浅色图

问题是：我希望浅色图像是可点击的，但是所有图像的画布会重叠。有没有办法做到这一点？它应该适用于所有主要浏览器，最好不适用于图像地图。我想将可点击区域链接到 PNG 图像的不透明部分。

我希望这有点道理，非常感谢。

【问题讨论】：

有多少个不同的省份？为所有不同的可能选择只使用不同的图像是否可行？
设置合适的z-index怎么样？
大约有10个省份，因此不可能为每个可能的组合创建一个图像。但即使这样也不能解决我的问题：如果我突出显示 3 个省份，我想知道用户点击了这 3 个省份中的哪一个。
@mkk：这有什么帮助？我认为问题在于各省不是精确的矩形，因此无论哪个在顶部都可能存在矩形图像的角实际上不是该区域的一部分的问题...实际上您需要通过点击透明图片的一部分...
@Chris 你是完全正确的，我的错。这不是正确的方法。

标签： javascript html css image png

【解决方案1】：

一个选项是只创建您的world 图像和另一个hittest 图像，其中所有省份都是不同的颜色。当用户点击某处时，您可以获得点击像素的颜色，并将其与省份相关联。因此，例如，您的hittest 图像将德克萨斯州作为红色，加利福尼亚州作为蓝色，纽约作为绿色。当你点击时，你只需要弄清楚颜色，你就有了你的状态。

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

【讨论】：

获得图像 x/y 的更广泛支持的方法是使用 <input type="image"> (w3.org/TR/html401/interact/forms.html#input-control-types)。单击时，它会提交单击的 x 和 y 坐标。所有浏览器都应该支持它，因为它已经在规范中很久了，我确信（虽然我没有检查过）javascript库会让你捕获点击并获取 x/y 和 ajax 如果你想的话.
出于兴趣，有什么推荐的方法可以让您的热门图片实际上不可见？您只是使用可见性还是防止点击也影响它？
@Chris，感谢您的提示。而且，如果可能的话，你可以让它可见。客户端的负载会更少。另一方面，如果艺术家改变地图上省份的颜色，你的代码可能会被破坏。
@Cristy，领先你 7 分钟 ;)
@TJHeuvel：我想您可以使用 RGB 部分的最低有效 2 位，并使用它们来存储该颜色所在国家/地区的 ID，以便它们看起来都是相同的颜色（一目了然至少）但您将能够提取您想要的信息。不过我可能想多了，但自从我看到en.wikipedia.org/wiki/Steganography#Digital_steganography 以来，我一直想做这样的事情：)

【解决方案2】：

您只能在整个图像上注册点击，而不是其中的彩色部分。为了使您的地图准确无误，您必须使用画布或 Flash。

【讨论】：

【解决方案3】：

<img> 标签可以通过它的正方形大小来点击，如果图像的一部分是透明的则无关紧要。即使点击图片的透明部分，也会发生点击事件。

为了避免这种情况，请查看 HTML IMAGE MAP <area> HTML 标记（google it），并选择性地告诉浏览器您想要应用某个事件的图像的哪一部分。

点击也会传播到相同位置的底部元素。这意味着<body> 总是被点击，如果你不停止使用e.stopPropagination(); 进行传播

如果您不想要图像映射，您可以将 invisible DIVs 放置在可点击区域形状的顶部。但我可能会选择图像地图。

【讨论】：

OP声明preferably NOT with image maps。
是的，我知道，但要么是图像映射要么什么都没有。除了我最后写的，别无选择。
可点击区域的形状非常不规则。我的透明 png 中确实有形状，所以我希望有某种方法可以将可点击区域链接到 png 文件中的非透明通道。
你可以有多边形区域。存在可以帮助您获取坐标的程序。
您可以为每个区域使用稍微不同的颜色，然后使用 javascript 获取点击像素的颜色，然后重定向到具有该颜色的区域:)。哦，如果你想的话，你可以使用 Dreamweaver tpo 快速绘制一张图像地图..