Сделайте HTML-изображение «click-see-through»

Question

У меня есть изображение, а поверх этого изображения - еще одно меньшее изображение. При щелчке первого изображения появляется второй, и он исчезает при повторном нажатии первого изображения. Моя проблема заключается в том, когда второе изображение появляется над первым, оно делает область, которую он покрывает первым изображением, не имеет значения. Можно ли сделать так, чтобы первое изображение можно было щелкнуть по второму изображению?

Это HTML для второго изображения (оно генерируется в PHP):

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

Answer 1

Просто поместите оба изображения в контейнере div и прикрепить обработчик событий к click, что вместо увеличения изображения. Таким образом, вы можете просто использовать событие event bubbling (который недоступен на большом изображении, так как он не может иметь дочерние элементы, например, меньшее изображение).

Найти рабочее решение здесь:

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>

Я предполагаю, что ваш вариант использования является своего рода замена флажок элемента? В этом случае, это может также представлять интерес для Вас:

Use images like checkboxes

Если это так, я хотел бы сделать окружающий divlabel вместо этого, поэтому он также автоматически проверяет (вероятно скрытый) реальный флажок.

Answer 2

Если я правильно понял вопрос, что вы описываете правильно, вы могли бы попытаться повернуть указатель события от за секунду образ, который часто отображается над щелчка-мишень:

.two { pointer-events: none; } 

Обратите внимание, что это поддерживается только с HTML в Internet Explorer 11 и выше (а также в Chrome и Firefox) , Для SVG поддержка была доступна в IE 9. Это может быть достаточно для работы, если необходимо.

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

Для лучшей поддержки вы должны переместить ваш обработчик к элементу, который не будет обструкции, и как таковой всегда будет работать, чтобы переключать видимость второго изображения:

<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"); 
}); 

Вышеприведенное просто связывает обработчик, чтобы щелкнуть события на контейнере .images, переключив класс, который будет скрывать и/или обнаруживать второе изображение, с учетом следующего:

.toggled .two { 
    opacity: .1; 
} 

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

Answer 3

Попробуйте это, если вы в порядке с помощью jquery-решения.

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

.hiddenimage{ 
display:none; 
} 

JQuery

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