Floating DIV appear on mousehover at mouse coordinates

[khaag]

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:

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:

<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:

<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:

.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!

[khaag]

BTW, if there's a better script to do this, I'm open to ideas as well.

[khaag]

Hopeful bump...

[WestWeb]

While that is an nice bit of javascript code, I really think you could make your life a whole lot easier if you could use the JQuery javascript library. Then your code could look as simple as this:

$("#anchor").mousemove(function(e){         
$(".box").show();         
$(".box").css({             
top: (e.pageY + 50) + "px",             
left: (e.pageX + 15) + "px"         
});     
});     
$("#the-box").mouseout(function(e){         
$(".box").hide();     
});

#anchor is the anchor link that you want to hover the mouse over, and .box is your pop-up box that will display while the mouse pointer is within the bounds of #anchor.

The + 50 and + 15 pixels are to offset .box from the mouse pointer, by the boxes' dimensions: adjust accordingly.

I tried this with a block level div that had a width and height set. You may need to add display: block; width: ??px; height: ??px; to your anchor link for this to work properly.

I hope that helps!

[khaag]

Thanks for the reply! I'll give it a try and let you know how it works.

[khaag]

I can't seem to get it to work... I'll post what I have and maybe you can point out what I'm doing wrong...

I have the Jquery script saved as "jquery.propertydisplay.js"

$(".thumbnail_link").mousemove(function(e){         
$("#6404_Chukur").show();         
$(".box").css({             
top: (e.pageY + 10) + "px",             
left: (e.pageX + 10) + "px"         
});     
});     
$(".thumbnail_link").mouseout(function(e){         
$("#6404_Chukur").hide();     
});

Anchors look like this:

<div class="Thumbnail_1"><a class="thumbnail_link" href="#"><img src="images/properties/thumb_address01.jpg" border="0" /></a></div>

Hidden box DIV looks like this:

<div class="box" id="6404_Chukur" 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>

CSS for the anchor class and box class:

.thumbnail_link {
        display:block;
        width:150px;
        height:95px;
}
.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;
}

And here's a link to the HTML page:
http://thekevbot.com/fresh/kw/properties2.html

Let me know if you need to see anything else!

[khaag]

One more hopeful bump...