Question

I have a div containing 2 images, one is sort of a map the other is a pinpoint image, I used javascript to capture mouse clicks as x,y coordinates and the pinpoint moved easily along with clicks, here how the code looked like:

<div id="areapage" onclick="javascript:SetValues();" style="display: none;">
  <img src="mysource" style="width:420;position:relative;" >
  <img id="pindiv" src="images/pin.png" style="position: absolute;top: 0;left: 0;"> 
</div>

<script>
    function SetValues()
{

        document.getElementById('pindiv').style.left = window.event.screenX + 'px';
        document.getElementById('pindiv').style.top = window.event.screenY + 'px';

}
</script>

it worked perfectly, until I placed it inside a fancybox, obviously something has changed, maybe x,y now refers to the original document in the background that opened the fancybox?

Answer 1

Try setting the #areapage div to position:relative; this will make the pindiv absolute positioning be based on that div rather than it’s parent.