图像分层,点击图标而不打背景

Question

我在Rails中使用HTML,CSS,JavaScript.我的图片存储在我的app/assets/images文件夹中.我的音频(用于onClick事件监听器)存储在我的public/audios文件夹中.

我希望将图像叠加在一起,以便我可以定位每个单独的图像以设置不同的JavaScript onClick事件监听器,但这些图像是用不可见的背景渲染的？这是干扰点击图像,它是分层的.

独立,我的图标(gif)没有背景.没有背景的图标采样供参考:http://findicons.com/search/gif

要突出显示图像有一个不可见的背景,

底部图标,这是突出显示的图标,单击图标的背景(突出显示)也启动JavaScript onClick事件监听器

我使用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 提供的示例（这非常简单，您可以使用其他工具创建更复杂的示例）：

<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/。

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