Image Overlaps

http://stackoverflow.com/q/26834244/1144203

HTML

<img id="first-img" src="http://www.clker.com/cliparts/a/4/1/d/1301963432622081819stick_figure%20(1)-md.png" />

<img id="second-img" src="http://www.clker.com/cliparts/a/4/1/d/1301963432622081819stick_figure%20(1)-md.png" />

CSS

img {
    width:100px;
    height:100px
}

#second-img{
    position:relative;
    right: 100px; /* slide me horizontally */
}

JavaScript

(function($){        
    var coordinates = function(element){
        element_position = element.position();
        element_width = element.width();
        element_height = element.height();
        element_coordinates = {
            top_left: {y_pos: element_position.top, x_pos: element_position.left},
            top_right: {y_pos: element_position.top, x_pos: element_position.left + element_width},
            bottom_left: {y_pos : element_position.top + element_height, x_pos: element_position.left},
            bottom_right: {y_pos: element_position.top + element_height, x_pos: element_position.left + element_width},
        };
        return element_coordinates;
    };
    
    var overlap = function(coordinates1, coordinates2){
        console.log(coordinates1);
        console.log(coordinates2);
        // !!INCOMPLETE - This only check the top horizontal positions of the two images
        if(coordinates2.top_left.x_pos <= coordinates1.top_right.x_pos)
            return true;
        else
            return false;
    };
    
    img1_coordinates = coordinates($("#first-img"));
    img2_coordinates = coordinates($("#second-img"));
    console.log("Image overlap? " + overlap(img1_coordinates, img2_coordinates));
})(jQuery);