如何在jquery中将点击事件写入png内的图像？

我有一个png图像，里面有一个洞，所以后面的图像可以通过这个看到。我需要的是，我想把点击事件写入这个内部图像。可能吗

//code
 $('#ant).click(function()
    {
        alert("hi");
    });

---

您可能需要创建一个图像贴图。

---

查看一个相对简单的生成方法，或者标签上的W3Schools页面：

使用jQuery（顶部的图像总是包含单击事件）很难实现这一点，我建议您查看一下

标签：

---

问题在于，顶部图像仍然存在，即使它是透明的。您可以尝试通过以下操作在顶部图像中单击位置：

$（“#彩虹”）。单击（函数（e）{
var offset=$（this.offset（）；
var left=e.clientX-offset.left；
var-top=e.clientY-offset.top；
如果（左>95和左<300）{
如果（顶部>95和顶部<220）{
警报（“hi”）；
}
}
});

---

上面的图片实际上非常接近，但由于图像的开口不是方形的，所以并不完美。您可以记录

左侧

和

顶部

来处理它，如果您想要更精确的内容，您可以准确地计算出您想要的内容，并添加更多的逻辑。

在jquery中，您可以在两个图像上放置单击事件，顶部图像将触发底部图像的单击事件

$("#topImage").click(function(e) { 
    e.preventDefault();
    $("#bottomImage").trigger("click"); 
});

$("#bottomImage").click(function(e) { 
    alert("bottom image beep"); 
});

---

因此，单击顶部图像将触发底部图像单击处理程序onclick

将图片作为背景放置在第一个DIV中，DIV位于孔中心的第二个位置，第三个DIV用于写入警报

<script>
    $(function(){
        $('#ant).click(function()
        {
            $('#message).html("Hi. This is event inside hole...");
        });
    });
</script>

<div class="background-image">
    <div class="container">
        <div id="message"></div>
    </div>
</div>

<button type="button" id="ant">Click and write</button>

$（函数（）{
$（'#ant）。单击（函数（）
{
$（'#message.html（“您好，这是孔内事件…”）；
});
});
点击并写入

---

当然，您需要与CSS完美结合的一切…

除了这里所说的一切，

我不能使用map tag，因为这是用于响应的，map tag不能用于响应的know。如果底部图像上有一个图像，它怎么会得到一个click事件呢？
trigger
方法就是这样做的，并触发在该查询节点上指定的事件eah，错过了该部分。但这与将警报直接放在topImage中的效果相同。（他只想在点击位于顶部图像的透明部分时让它工作）这是真的，不知道你还想怎么做。
<script>
    $(function(){
        $('#ant).click(function()
        {
            $('#message).html("Hi. This is event inside hole...");
        });
    });
</script>

<div class="background-image">
    <div class="container">
        <div id="message"></div>
    </div>
</div>

<button type="button" id="ant">Click and write</button>