Mouse Coordinates & Box Displaying

Simply copy and paste the following code inside your body tags and run it from a browser.

If you want to see the live result (we believe this is the best way to learn what is the script about), try it here (new window).

Code source

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta content="text/html;charset=utf-8" http-equiv="content-type" />
<style type="text/css">
//We hide the box at first (hidden)
#box{
width: 200px;
height: 100px;
overflow:hidden;
visibility: hidden;
background-color:#8f8f8f;
color:red;
position:absolute;
opacity:.50;
filter:alpha(opacity=50);
-moz-opacity:0.5;
}

//we give a style to the close button which is only a link
a.close{width:20px;height:20px;text-align:center;margin:5px;
border:1px solid black;float:right;background-color:white;color:red;
font-size:16px;text-decoration:none}
</style>

<script language="javascript">
<!--

function ShowBox(evt)
{
/*simple browser detection in order to choose between using pageX (does not work in IE) and clientX*/
	var IE=false;
	if(navigator.appName == "Microsoft Internet Explorer")
	IE = true;

	if(IE)
	{
		x = evt.clientX + document.body.scrollLeft;
		y = evt.clientY + document.body.scrollTop;
	}
	else
	{
		x = evt.pageX;
		y = evt.pageY;
	}

/*display the box at 15px from the mouse pointer*/
	obj = document.getElementById("box");
	obj.style.left = (x + 15) + 'px';
	obj.style.top = (y + 15) + 'px';
	obj.style.visibility = 'visible';
}

function closeBox()
{
/*Hide the box on close event*/
	obj = document.getElementById("box");
	obj.style.visibility = 'hidden';
}
// -->
</script>

</head>
<body>
<div id="box">
<a href="#" onclick="javascript:closeBox();return false;" class="close" title="Close the box">X</a>
The content of the box which is shown on click from the link.<br />
You can add anything here as usually...
</div>
<a href="#" onclick="javascript:ShowBox(event);return false;">Click me to load</a>
</body>
</html>

download the file

For explicit information about the browser detection and problems occuring accross browsers, you check these sources:
http://developer.mozilla.org/en/docs/DOM:event
http://msdn.microsoft.com/...dhtml_overviews_entry.asp
http://msdn.microsoft.com/.../browserdetection.asp

In addition to studying the way it's done to retrieve the mouse coordinates, I have added a bit of CSS code to manage the opacity of a box and the simple visual effect of the same box including the link tag.

Webmaster Corner

The ClickBnk Code
Another Killer Product From Michael Jones, simply follow the Blueprint For Easy Online Wealth Using Click Bank...

Mass Article Control #1
Create Thousands Of Articles From only 1 Article and Have them Submitted Automatically With A brand New Submitter!

iPowerWeb
Incredible Membership Packages - Web Hosting!

→ Maverick Money Makers - Get Paid For Life!

Mouse Coordinates & Box Displaying

Mouse Coordinates & Box Displaying

Webmaster Corner

Categories