Question

我有png图像，里面有一个洞，所以通过它可以看到它后面的图像。我需要的是，我想将click事件写入此内部图像。有可能吗？

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

Answer 1

您可能想要创建一个图像映射。查看http://www.image-maps.com以获得生成一个相对简单的方法，或在＆lt; map＆gt;上查看W3Schools页面。标记：http://www.w3schools.com/tags/tag_map.asp

Answer 2

使用jQuery实现这一点很困难（顶部的图像总是需要点击事件），我建议你看一下<map>标签：

http://www.w3schools.com/tags/tag_map.asp

Answer 3

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

JSFiddle

 $('#rainbow').click(function (e) {
    var offset = $(this).offset();
    var left = e.clientX - offset.left;
    var top = e.clientY - offset.top;
     if (left > 95 && left < 300) {
         if (top > 95 && top < 220) {
             alert("hi");
         }
     }
 });

以上实际上非常接近，但由于图像开口不是正方形，所以并不完美。你可以记录left和top来解决这个问题，并准确找出你想要计算的内容，如果你想要更精确的话，可以添加更多逻辑。

Answer 4

在jquery中，您可以将click事件放在两个图像上，而顶部图像将trigger底部图像点击事件

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

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

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

Answer 5

将图片作为背景放在第一个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>

当然，您需要精心梳理CSS ...

Answer 6

除了此处所述的所有内容之外，<area>标记可以为您提供帮助虽然坐标是编写有效代码的旧方法，但它们可以通过键入x1,y1,x2,y2 shape=rect，x,y,radius shape="circle"来定位图像上的特定点。
您还有shape="poly"多边形，由x1,y1,x2,y2,..,xn,yn编写。

我建议您可以尝试这种方式，选择您最喜欢的，当然对您最有效。
W3SCHOOLS AREA TAG EXPLAIN

如何在jquery中的png里面写一下click事件？

6 个答案: