Position a popup on mouseover - coordinates seem incorrect?

Hi All,
I'm trying to popup a div (containing an image) over another image (a chart). I do this by creating an image map (made up of area tags) and assigning a javascript function to the mouseover and mouseout events.
I then collect the coordinates (using window.event.clientX/Y) and try to popup the div. However, i'm struggling with the Y coordinate - it seems to move the opposite way to the mouse.
Does anyone have any ideas?
Thanks,
S Armondi

Javascript:
function ShowTradeCallout()
{
   var div = document.getElementById('ctl00_ContentPlaceHolder1_test');
   var img = document.getElementById('ctl00_ContentPlaceHolder1_chart');
   if (true) //if (!PopupDisplayed)
   {
       var x = 0,y = 0;
       x = event.clientX;
       y = event.clientY;
       if (document.pageYOffset)
       {
           x += document.pageXOffset;
           y += document.pageYOffset;
       }
       else if(document.documentElement && document.documentElement.scrollTop)
       {
           x += document.documentElement.scrollLeft;
           y += document.documentElement.scrollTop;
       }
       else if(document.body)
       {
           x += document.body.scrollLeft;
           y += document.body.scrollTop;
       }
       div.setAttribute("class", "displayedCallout");
       div.setAttribute("className", "displayedCallout");
       div.style.pixelLeft = x;
       div.style.pixelBottom = y;
   }
}
function HideTradeCallout()
{
    var div = document.getElementById("ctl00_ContentPlaceHolder1_test");
    div.setAttribute("class", "hiddenCallout");
    div.setAttribute("className", "hiddenCallout");
}

Select allOpen in new window

popup1.png
popup2.png
popup3.png