hi all,
i'm using JS to display a hover popup over a set of images. it's designed to follow the cursor as it moves. everything works fine in firefox, safari, etc. but in internet explorer, the hover image and text scrolls with the page. in other words, if i scroll down 2 inches, the hover image is then 2 inches above its target. if i scroll to the bottom of the page, then the hover image is off the page entirely. see this link for example.

any help you can lend would be greatly appreciated.


Code:
<script type="text/javascript"><!--

var pop = document.getElementById('popup');

var xoffset = 15;
var yoffset = 10;

document.onmousemove = function(e) {
  var x, y, right, bottom;
  
  try { x = e.pageX; y = e.pageY; } // FF
  catch(e) { x = event.x; y = event.y; } // IE

  right = (document.documentElement.clientWidth || document.body.clientWidth || document.body.scrollWidth);
  //bottom = (window.scrollY || document.documentElement.scrollTop || document.body.scrollTop) + (window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || document.body.scrollHeight);

  x += xoffset;
  y += yoffset;

  if(x > right-pop.offsetWidth)
    x = right-pop.offsetWidth;
 
  if(y > bottom-pop.offsetHeight)
    y = bottom-pop.offsetHeight;
  
  pop.style.top = y+'px';
  pop.style.left = x+'px';

}

function popup(text) {
  pop.innerHTML = text;
  pop.style.display = 'block';
}

function popout() {
  pop.style.display = 'none';
}

//--></script>