How can I identify if a specific PNG file is placed next to another PNG file on a webpage, and trigger an alert if they are?
The issue I'm facing is that the alert pops up as soon as the webpage loads.
Here's the code I'm using for the PNG files:
<div id="container" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)">
<div id="donkey">
<img src="images/donkey.png">
</div>
<div id="tail">
<img src="images/donkeytail.png">
</div>
</div>
And here's the jQuery code:
<script>
$(function() {
$( "#tail" ).draggable();
});
if($("#tail").css({top: 382, left: 810, position:'absolute'})){
alert ('You win');
}
</script>
I used a Chrome extension to determine the exact coordinates where the tail should be placed.
I'm uncertain if I'm approaching this correctly, so any assistance would be greatly appreciated!
Thank you!