Hi guys, I'm having a hard time figuring this one out...

I have a Div that is set to display:none with CSS, and I have it set to appear when the mouse is hovered over an anchor. It all works fine and dandy, but I want the div to appear at the coordinates of my mouse cursor and follow it around until it's taking off of the anchor, when the div will be hidden again.

Here's the live page: http://thekevbot.com/fresh/kw/properties.html

Here's my Javascript:

Code:
var cX = 0; var cY = 0; var rX = 0; var rY = 0;
function UpdateCursorPosition(e){ cX = e.pageX; cY = e.pageY;}
function UpdateCursorPositionDocAll(e){ cX = event.clientX; cY = event.clientY;}
if(document.all) { document.onmousemove = UpdateCursorPositionDocAll; }
else { document.onmousemove = UpdateCursorPosition; }
function AssignPosition(d) {
if(self.pageYOffset) {
	rX = self.pageXOffset;
	rY = self.pageYOffset;
	}
else if(document.documentElement && document.documentElement.scrollTop) {
	rX = document.documentElement.scrollLeft;
	rY = document.documentElement.scrollTop;
	}
else if(document.body) {
	rX = document.body.scrollLeft;
	rY = document.body.scrollTop;
	}
if(document.all) {
	cX += rX; 
	cY += rY;
	}
d.style.left = (cX+10) + "px";
d.style.top = (cY+10) + "px";
}
function HideContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
if(d.length < 1) { return; }
var dd = document.getElementById(d);
AssignPosition(dd);
dd.style.display = "block";
}
function ReverseContentDisplay(d) {
if(d.length < 1) { return; }
var dd = document.getElementById(d);
AssignPosition(dd);
if(dd.style.display == "none") { dd.style.display = "block"; }
else { dd.style.display = "none"; }
}
Here's the anchor that calls the DIV:
Code:
<a onmouseover="ShowContent('6404_Chukar'); return true;" onmouseout="HideContent('6404_Chukar'); return true;"
            href="#"><img src="images/properties/thumb_address01.jpg" border="0" /></a>
The DIV that is being displayed:

Code:
<div class="box" id="6404_Chukar" align="center">
	<table style="margin-top:5px;" width="350" border="0">
  	<tr>
    	<td style="color:#000; font-size:14px; font-family:Georgia, 'Times New Roman', Times, serif; font-style:italic; font-weight:bold;" width="196">6404 Chukar Drive</td>
    	<td style="font-size:10px;" align="right" valign="bottom" width="138">Click here for more information</td>
  	</tr>
	</table>
	<table width="350" border="0">
  	<tr>
    <td style="color:#000; font-family:Georgia, 'Times New Roman', Times, serif; font-size:11px; line-height:18px; font-style:italic; font-weight:bold" width="95">Area<br />Type<br />Property Size<br />House Size<br />Beds<br />Baths<br /></td>
    	<td style="font-family:Georgia, 'Times New Roman', Times, serif; font-size:11px; line-height:18px; font-style:italic;" width="95">Dallas<br />Single-Family<br />19,311 Sq Ft<br />6400 Sq Ft<br />3<br />2</td>
    	<td valign="bottom"style="color:#000; font-size:24px; font-family:Georgia, 'Times New Roman', Times, serif; font-weight:bold; font-style:italic;"align="right" valign="bottom" width="138">$1,999,000</td>
  	</tr>
	</table>
</div>
And my CSS:

Code:
.box {
	display:none;
	height: 144px;
	width: 400px;
	background-image: url(../images/hover_bg.gif);
	background-repeat: repeat-x;
	position: absolute;
	z-index: 1000;
	padding-top: 10px;
	padding-bottom: 10px;
	color: #686868;
}
HALP!