jQuery Coords change with browser/screen resize

Question

After much help from anstosa on a previous coords question I thought I'd better start a new question.

The problem I have is I am setting a onclick event and the possition of the active event is determined by the coords of the image. But if I resize the browser window the coords change and the event does not function. Well it does, but not where I want to trigger it.

Is there a way to have a fixed reference to work from?

My code

//change map on hover

jQuery('#map').mousemove(function(e){
    var x = e.clientX - this.offsetLeft;
    var y = e.clientY - this.offsetTop;
    jQuery('#map-xy').html("X: " + x + " Y: " + y);
});

//Orange
jQuery('#map').on('click', function(e){
var x = e.clientX - this.offsetLeft,
    y = e.clientY - this.offsetTop;
if (x > 620 && x < 935 && y > 678 && y < 785) {
    jQuery(this).children('img').attr('src', '/javascripts/images/map-orange-  shadow.png');

}

});

When the browser is resized or a person has a different screen size the references change so "if (x > 620 && x < 935 && y > 678 && y < 785)" does not reference the area i want to click on.

I hope that makes more sense

Thanks

Cheers laurence