I'm making an announcement with the wScratchPad.js plugin to discover a promotion by deleting the image above.
The problem is that above the image that is deleted, I have put text and other images, and when touching these elements, the background is not deleted, since the user is not directly touching the background.
I suppose that what I would have to do is to add these elements as variables, but I don't know how, since I have little knowledge in Javascript, and I am using this plugin for the first time. Could anyone point me where to add the variables and how to do it?
I leave you my code:
var content = document.getElementById('content');
var redirect= document.createElement('a');
redirect.id="redirect";
$(document).ready(function() {
setTimeout(function(){
$("#opacidad100").fadeTo(500,1);
},500);
setTimeout(function(){
$("#celu").fadeTo(1000,1);
$("#limpia").fadeTo(1000,1);
$("#paravos").fadeTo(1000,1);
},1000);
setTimeout(function(){
//$('#demo2').css({'opacity':'0'});
$('#demo2').css({'opacity':'0'});
//$("p").css({'color':'red','font-size':'1.3em','background':'yellow'});
$('#demo2').wScratchPad({
//bg: './images/winner.png',
//bg: 'final.png',
//fg: 'opacidad100.jpg',
fg: 'opacidad100.jpg',
'cursor': 'crosshair',
'opacity':'0',
scratchMove: function (e, percent) {
$('#demo2-percent').html(percent);
$('#demo2-percent').css({'opacity':'0'});
if (percent > 1) {$('#info').css({'display':'none'});
$("#final").fadeTo(10,1);}
if (percent > 50) {
$('#demo2').fadeOut(500,0);
content.appendChild(redirect);
// this.clear();
/* function clear() {
this.ctx.clearRect(0, 0, Math.ceil(this.$el.innerWidth()), Math.ceil(this.$el.innerHeight()));
}*/
}
}
});
setTimeout(function(){
$("#demo2").fadeTo(500,1);
},300);
setTimeout(function(){
$( "#hielo" ).fadeOut(500,0);
},300);
},500);
});
var clickTag = "";
redirect.onclick = function(){
window.open(clickTag, "blank")
}
<div id="info">
<img src="descubre-min.png" id="descubre" alt="descubre" style="position:absolute;opacity:0;z-index:50;margin-top:140px;left:50%;margin-left:-121px;"/>
<img src="celu-min.gif" id="celu" alt="celu" style="position:absolute;opacity:0;z-index:50;margin-top:170px;left:33%;margin-left:-43px;height:200px"/>
<img src="limpia.png" id="limpia" alt="limpia" style="position:absolute;opacity:0;z-index:50;margin-top:370px;left:75px;margin-left:-50px;"/>
<img src="paravos.png" id="paravos" alt="paravos" style="position:absolute;opacity:0;z-index:50;margin-top:100px;left:33%;margin-left:-50px;"/>
</div>
Try using
pointer-events: none
, so you can remove the mouse events on those objects and it will let you use what you want