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

Image layering, click on icon without hitting background

本文关键字：背景 图标 图像 分层      更新时间：2023-09-26

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

我正在寻找图层图像在彼此之上，所以我可以针对每个单独的图像设置不同的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事件侦听器)。

编辑:只是编辑了我的最后三段，使其更容易理解

不用去掉背景，使用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/.

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

这是<img>标签的预期行为。它们总是有一个矩形的点击框。

有一个<map>标签，它将提供您正在寻找的行为(经过一点配置)，但那已经过时很久了。

你需要使用HTML5的<canvas>或Flash重新构想你的解决方案。

哎呀，您甚至可以使用一个图像与一个onClick处理程序，从event参数(提示:e.clientX和e.clientY)中获取鼠标坐标，如果您想变得混乱。:)

相关文章：