图像分层，点击图标而不点击背景

Question

我在 Rails 中使用 HTML、CSS、JavaScript。 我的图像存储在我的 app/assets/images 文件夹中。 我的音频（用于 onClick 事件监听器）存储在我的 public/audios 文件夹中。

我希望将图像叠加在一起，这样我就可以针对每个单独的图像设置不同的 JavaScript onClick 事件侦听器，但是这些图像是用不可见的背景呈现的吗？这会干扰点击它所在的图像。

独立，我的图标 (gif) 没有背景。 无背景图标示例供参考：http://findicons.com/search/gif

为了突出显示图像有一个不可见的背景，

the bottom icon, this is the icon highlighted, clicking in the background of the icon (it's highlighted) also initiates the JavaScript onClick event listener

我使用 rails 命令在我的页面上呈现图像。

<div id="id3">
  <%= image_tag "gif_file.png" %>
</div>

我的 css 以 div 为目标

#id3 {
  position:absolute;
}

为了减少文本数量和混乱，我省略了显示分层图标的代码。

我的 .js 文件

var soundright = '<audio autoplay="autoplay" src="/audios/hello.wav"></audio>'
var sound = document.getElementById('sound');

var icon = document.getElementById('id3');

$(icon).click(function(){
  $(sound).html(soundright);
});

请告知我如何单击每个可见分层的渲染图像（JavaScript onClick 事件侦听器添加到每个单独的图像），而不会碰到分层图像的不可见背景。

消除不可见的背景是我一直无法找到的解决方案。

我正在尝试通过将图像相互叠加来制作飞镖靶，并使飞镖靶的每个部分都可点击（onClick 事件侦听器）。

编辑：刚刚编辑了我的最后 3 段以使其更易于理解

Answer 1

除了消除背景，使用JS，还有HTML的解决方案。

将您的图像合并为一张图像，然后使用<map> 在其上创建“图像映射”。这意味着创建<area>标签来定义可点击区域，每个区域（每张图片）可以触发不同的JS事件监听器。

要更好地了解如何使用它，请参阅 w3schools 提供的example（这很简单，您可以使用其他工具创建更复杂的工具）：

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
    <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
    <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
    <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

还有很多工具可以创建图像地图（因此您不必查找坐标并手动输入），例如https://www.image-maps.com/。

图像地图是解决这个特定问题的一个非常酷的解决方案！

Answer 2

这是<img> 标签的预期行为。他们总是有一个矩形的碰撞箱。

有一个 <map> 标记可以提供您正在寻找的行为（经过一些配置），但这已经过时了。

您需要使用 HTML5 的 <canvas> 或（不寒而栗）Flash 重新构想您的解决方案。

哎呀，如果您想弄得一团糟，您甚至可以使用带有一个 onClick 处理程序的图像，该处理程序从 event 参数（提示：e.clientX 和 e.clientY）中获取鼠标坐标。 :)