jquery - jQuery Coordsはブラウザ/画面のサイズ変更で変化します

Question

以前の coords の質問で anstosa から多くの助けを得た後、新しい質問を開始したほうがよいと思いました。

私が抱えている問題は、onclick イベントを設定していて、アクティブなイベントの位置が画像の座標によって決定されることです。しかし、ブラウザ ウィンドウのサイズを変更すると、座標が変更され、イベントが機能しなくなります。それはできますが、トリガーしたい場所ではありません。

作業するための固定参照を持つ方法はありますか?

私のコード

//ホバーでマップを変更

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');

}

});

ブラウザーのサイズが変更されるか、人の画面サイズが異なると、参照が変更されるため、「if (x > 620 && x < 935 && y > 678 && y < 785)」は、クリックしたい領域を参照しません。

それがより理にかなっていることを願っています

ありがとう

乾杯ローレンス