jQuery鼠標位置

我有一個問題，用jQuery的鼠標懸停。我有一張地圖圖片。當我將鼠標懸停在特定區域時，應該在鼠標位置彈出一個div，而不是根據頁面的滾動高度彈出一個div。 jQuery鼠標位置

這是一切正常的時候。接下來的圖片顯示了當我滾動更高時會發生什麼。

懸停的面積是相同的，但分區不是在正確的地方。我所做的代碼如下：

$(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