Image Hotspot Region

HTML

<div>
<div id="image-canvas" class="content-hspe">   
    <div id="reg1" data-postop="120" data-posleft="100"></div>
</div>
<br />
<br />
<span id="output"></span>
</div>

CSS

#image-canvas
{
    position:relative;    
    width: 300px;
    height:215px;
    background-position: left top;
    background-repeat: no-repeat;
    border: solid 1px #000;
    cursor: pointer;
}

    #image-canvas .marker
    {
        position:absolute;
        background-color:brown;
        height:16px;
        width:16px;
    }

.content-hspe
{    
    background-image: url('http://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Lifeboat.17-31.underway.arp.jpg/300px-Lifeboat.17-31.underway.arp.jpg');
}

    .content-hspe #reg1
    {        
        position:absolute;        
        height: 53px;
        width: 50px;
        top: 120px;
        left: 100px;
        background-color:#FFF;
    }

JavaScript

$(document).ready(function () {
    PreloadHotSpot();
    InitialiseHotspotImage();
});
    
function PreloadHotSpot()
{
    //Specify on load where the marker needs to be
     var $marker = $("<span class='marker' />").css('left', 122).css('top', 120);
                
        $("#image-canvas").append($marker);
    
    var output = IsMarkerInRegion($("#image-canvas #reg1"), $marker.position().left, $marker.position().top);
    
    $("#output").append(output + "<br />");
    console.log(output);
}

function InitialiseHotspotImage()
{       
    $("#image-canvas").click(function(e) {
        var offset = $("#image-canvas").offset();
        
        var markerPositionTop = (e.clientY - offset.top);
        var markerPositionLeft = (e.clientX - offset.left);
        
        var $marker = $("<span class='marker' />").css('left', markerPositionLeft).css('top', markerPositionTop);
                
        $("#image-canvas").append($marker);
         
         var output = IsMarkerInRegion($("#image-canvas #reg1"), markerPositionLeft, markerPositionTop);
        
        $("#output").append(output + "<br />");
    
    });    
}


function IsMarkerInRegion($region, coordX, coordY) {
    var posTop = parseInt($region.attr("data-postop"));
    var posLeft = parseInt($region.attr("data-posleft"));

    var markerPositionTop = coordY ;
    var markerPositionLeft = coordX;
    
    console.log(coordX + " " + coordY) ;   
    
    var regionWidth = $region.width() ;
    var regionHeight = $region.height();
    
    console.log(regionWidth);
    
    if ((markerPositionTop > posTop && markerPositionTop < (posTop + regionHeight)) && (markerPositionLeft > posLeft && markerPositionLeft < (posLeft + regionWidth)))
        return true;    
    else 
        return false;    
    
}