jQuery позиция мыши

Question

У меня проблема с наложением курсора jquery. У меня есть изображение с картой. Когда я наводил указатель мыши на определенные области, div должен появляться в позиции мыши, вместо этого div появляется в позиции в соответствии с высотой прокрутки страницы.

Это все, что происходит. И следующее изображение показывает, что происходит, когда я прокручиваю немного выше.

Замешанный район тот же, но 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(); 
        }); 
       }); 
     }); 

Я никогда не работал с картами и области раньше, поэтому я не знаю, что может быть напутал. Я получил простой 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="" /> 

Так что мой вопрос: почему это происходит и как я могу это исправить? Заранее спасибо!

Answer 1

Позиция курсора мыши основана на координатах X и Y на странице , стр.. Вы ищете pageX и pageY: http://api.jquery.com/event.pagex/

Таким образом, вы, вероятно, желая position: fixed; элемент, основанный на e.pageX и e.pageY

Answer 2

Вы хотите позиционирование всплывающего окна, чтобы быть относительно вашего окна просмотра и не к родительскому элементу. Следовательно, используйте положение как «фиксированное», а не «абсолютное».