Krisztián Dudás Krisztián Dudás - 2 months ago 15
HTML Question

jQuery mouse position

I have a problem, with jquery's mouseover. I have an image with a map. When I hover the mouse on specific areas, a div should pop up at the position of the mouse, instead the div pops up at a position according to the scrolling height of the page. enter image description here

This is when everything goes right.
And the next image shows what happens when I scroll a bit higher.
enter image description here

The hovered area is the same, but the div is not at the right place. The code I made is the following:

$(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();
});
});
});


I have never worked with maps and areas before, so I don't know what could be messed up. I got a plain html from web archive and I need to restore the site in wordpress. Here is an area from the html code:

<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="" />


So my question is: why does this happen and how can I fix it? Thanks in advance!

Answer

The mouse cursor's position is based upon it's X and Y co-ordinates on the page. You're looking for pageX and pageY: http://api.jquery.com/event.pagex/

So you're probably wanting to position: fixed; the element based upon the e.pageX and e.pageY