我正在尝试创建一个分布在不同省份的国家/地区的地图。当我的产品在某些省份可用时，这些省份将在地图上点亮。然后我希望人们能够选择一个省并点击它。
我想这样做： 1）我有一个深色的完整国家的背景 2）每个省都有一个单独的浅色透明png 3）当我的数据库检测到产品可用时，它将显示背景图像+每个省的浅色图像
问题是：我希望浅色图像可以点击，但所有图像的画布都会重叠。有没有办法实现这个目标？它应该适用于所有主流浏览器，最好不要使用图像映射。我想将可点击区域链接到PNG图像的非透明部分。
我希望这有点意义，非常感谢提前。
答案 0 :(得分：4)
一个选项是创建您的world图片和另一个hittest图片，其中所有省份都是不同的颜色。当用户点击某处时，您可以获得所点击像素的颜色，并将其与省份相关联。因此，例如，您的hittest图像将德克萨斯视为红色，加利福尼亚为蓝色，纽约为绿色。当你点击时，你只需要弄清楚颜色，然后就可以了解你的状态。
至于获取鼠标下的像素颜色，画布可以做到这一点。然而，＆lt;不支持IE8，也许你可以看看explorercanvas。否则你可以在服务器端执行，只需在点击时使用（相对！）x / y对页面执行AJAX请求，然后你的后端可以解决它。
答案 1 :(得分：0)
您只能在整个图像上注册，而不是在其中着色部分。为了使您的地图准确，您必须使用画布或闪光灯。
答案 2 :(得分：0)
<img>标签可以通过它的方形大小进行点击，如果图像的一部分是透明的则无关紧要。即使您单击图像的透明部分，也会发生单击事件。
要采取行动，请选择 HTML图片地图 <area> HTML标记（谷歌），并可选择告诉浏览器您想要应用某些事件的图像部分
Click也会传播到同一位置的底部元素。这意味着如果您不停止使用<body>进行宣传，则始终会点击e.stopPropagination();
如果您不想要图像地图，可以在可点击区域的形状顶部放置不可见DIV 。但我可能会选择图像地图。