创建一个HTML图像“点击-透视”

I have an image, and on top of that image is another smaller image. When the first image is clicked, the second one appears, and it disappears when the first image is clicked again. My problem is when the second image appears over the first one, it makes the area that it covers of the first image unclickable. Is it possible to make it so the first image can be clicked through the second image?

我有一个图像，在这个图像的顶部是另一个较小的图像。当第一个图像被单击时，第二个图像将出现，当第一个图像再次被单击时，第二个图像将消失。我的问题是，当第二个图像出现在第一个图像上时，它覆盖的第一个图像区域就不能单击。是否可以让第一个图像通过第二个图像被点击?

This is the HTML for the second image (it's generated in PHP):

这是第二个图像的HTML(它是用PHP生成的):

Echo '<img src="images/tick.png" id="tick' . $i .'" class="hidden" style="position: absolute; top: 0px; left: 70%;"/>';

3 个解决方案

#1

Simply put both images in a container div, and attach the click event handler to that instead of the bigger image. This way you can simply make use of event bubbling (which isn't available on the bigger image since it cannot have child elements, such as the smaller image).

只需将两个图像放在容器div中，并将单击事件处理程序附加到该容器中，而不是更大的图像。通过这种方式，您可以简单地使用事件冒泡(这在较大的映像上是不可用的，因为它不能包含子元素，比如较小的映像)。

Find a working solution here:

在这里找到一个有效的解决方案:

https://jsfiddle.net/6nnwy3xw/

https://jsfiddle.net/6nnwy3xw/

$(document).ready(function() {
    $('.imgcontainer').on('click', function() {
        $(this).toggleClass('toggleImg');
    });
})

.imgcontainer {
    height: 300px;
    width: 300px;
    position: relative;
}

.imgcontainer img:first-child {
    display: block;
    height: 300px;
    width: 300px;
}

.imgcontainer img+img {
    position: absolute;
    top: 50px;
    left: 50px;
    opacity: 0;
    transition-duration: 0.3s;
}

.imgcontainer.toggleImg img+img {
    opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="imgcontainer">
    <img src="http://lorempixel.com/300/300" />
    <img src="http://lorempixel.com/200/200" />
</div>

I'm assuming your use-case is some kind of checkbox replacement element? In this case, this may also be of interest to you:

我假设你的用例是某种复选框替换元素?在这种情况下，您可能也会感兴趣:

Use images like checkboxes

使用图像像复选框

If that is the case, I'd make the surrounding diva label instead, so it also automatically checks your (probably hidden) real checkbox.

如果是这样的话，我将创建周围的diva标签，因此它也会自动检查您的(可能是隐藏的)真正的复选框。

#2

If I understand the issue you're describing properly, you could try turning pointer-events off for the second image, that is often displayed over the click-target:

如果我理解您所描述的问题，您可以尝试关闭第二个图像的指针事件，它通常显示在点击目标上:

.two { pointer-events: none; }

Note that this is only supported with HTML in Internet Explorer 11 and up (as well as in Chrome and Firefox). For SVG, support was available in IE 9. That may suffice for a work-around if needed.

请注意，这只在Internet Explorer 11和up(以及Chrome和Firefox)中支持HTML。对于SVG，支持在ie9中可用。如果需要的话，这可能就足够了。

Fiddle: http://jsfiddle.net/tbqxjp19/

小提琴:http://jsfiddle.net/tbqxjp19/

For better support you should move your handler to an element that will not be obstructed, and as such will always work to toggle the visibility of the second image:

为了获得更好的支持，您应该将处理程序移动到一个不会被阻塞的元素上，并且因此将始终工作于切换第二个映像的可见性:

<div class="images">
    <img src="http://placehold.it/100x100" class="one" />
    <img src="http://placehold.it/100x100/000000" class="two" />
</div>

document.querySelector( ".images" ).addEventListener( "click", function () {
    this.classList.toggle( "toggled" );
});

The above simply binds a handler to click events on the .images container, toggling a class that will hide and/or reveal the second image, given the following:

上面只是绑定一个处理程序来单击.images容器上的事件，并切换一个类来隐藏和/或显示第二个映像，给定以下条件:

.toggled .two {
    opacity: .1;
}

Fiddle: http://jsfiddle.net/tbqxjp19/1/

小提琴:http://jsfiddle.net/tbqxjp19/1/

#3

Try this , if you are fine with jquery solution.

如果您对jquery解决方案很好，可以尝试一下。

HTML

HTML

<img src="images/large.png" class ="image" id="image1" style="position: absolute; top: 0px; left: 0px;" />
<img src="images/small.png" id="image2" class ="image" style="position: absolute; top: 0px; left: 0px; z-index:10;" />

css

css

.hiddenimage{
 display:none;
}

JQuery

JQuery

$(".image").click(function(){
  ("#image2").toggleClass("hiddenimage");
})

#1