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

有一种HTML解决方案，而不是消除背景和使用JS。

将您的图片合并为一张图片，然后使用<map>创建一张＆＃34;图片地图＆＃34;在上面。这意味着创建<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）抓取鼠标坐标，如果你觉得变得混乱。：）

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

2 个答案: