Detecting if Html element is overlapping another Html element

Question

in jQuery or Javascript, how would I detect if an img tag for example is overlapping another img tag?

Answer 1

You can do that by finding the offset of the elements, then finding the width & height of each. It's then just a matter of simple math to determine if they're overlapping.

I'm not going to do all the work for you, but this should get you on the right track:

<div id="one"></div>
<div id="two"></div>

<script>
var offsetOne = $('#one').offset();
var offsetTwo = $('#two').offset();
var widthOne = $('#one').width();
var widthTwo = $('#two').width();
var heightOne = $('#one').height();
var heightTwo = $('#two').height();
</script>

All that's left is to use the two offset's .top & .left along with the widths and heights to determine if there's an overlap. Check out the links to documentation in each of the functions in the first paragraph of my answer.