jQueryマウスの位置

jqueryのマウスオーバーに問題があります。私は地図を持ったイメージを持っています。特定の領域にマウスを置くと、divの部分がマウスの位置にポップアップするはずです。代わりにdivがページのスクロールの高さに応じた位置にポップアップします。 jQueryマウスの位置

これはすべてが正しい時です。次の画像は、少し上にスクロールするとどうなるかを示しています。

ホバリングエリアは同じですが、divは適切な場所にありません。私が作ったコードは以下の通りです：

$(document).ready(function(){ 
       $('area').mouseover(function(e){ 
        var x = e.clientX; 
        var y = e.clientY; 
        var id = $(this).attr("id"); 
        $("div#map-popup-"+id).css({position: "absolute", top: y, left: x}); 
        $("div#map-popup-"+id).show(); 
        $(this).mouseleave(function(){ 
         $("div#map-popup-"+id).hide(); 
        }); 
       }); 
     });

私は前にマップや地域で働いたことがないので、私は台無しにすることができるか分かりません。私はWebアーカイブからプレーンなHTMLを得て、私はwordpressでそのサイトを復元する必要があります。ここにHTMLコードからの領域があります：

<img src="https://web.archive.org/web/20160307004818im_/http://dcca.eu/img/chambers_map_new.png" width="1000" height="507" alt="" usemap="#chambers-map" /> 
<map id="chambers-map" name="chambers-map"> 
    <area id="ulm" shape="circle" coords="85,160,10" href="#" alt="" /> 
    <area id="passau" shape="circle" coords="232,136,10" href="#" alt="" />

私の質問は：なぜこれが起こり、どうすれば修正できますか？前もって感謝します！

出典

2016-09-26 Krisztián Dudás