Forum Moderators: open
here are a couple of examples that may interest you....
1. Full page
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript"><title>cursor position</title>
<style type="text/css">
html,body {
height:100%;
margin:0;
padding:0;
background-color:#ccc;
cursor:crosshair;
}
#info{
padding-top:20px;
text-align:center;
}
</style><script type="text/javascript">
function init(){
if(window.addEventListener){
document.body.addEventListener('mousemove',curPos,false)
}
else {
if(window.attachEvent){
document.body.attachEvent('onmousemove',curPos);
}
}
obj=document.getElementById('info');
}function curPos(event){
w=event.clientX
h=event.clientY;if(/*@cc_on!@*/false){
obj.firstChild.nodeValue='x='+(w-2)+'px y='+(h-2)+'px';
}
else{
obj.firstChild.nodeValue='x='+w+'px y='+h+'px';
}
}if(window.addEventListener){
window.addEventListener('load',init,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',init);
}
}</script>
</head>
<body><div id="info"> </div>
</body>
</html>
2. Div element
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript"><title>cursor position</title>
<style type="text/css">
body {
margin:10px;
padding:0;
background-color:#15a189;
}
#box {
position:relative;
width:398px;
height:398px;
border:1px solid #121212;
background-color:#1eecca;
cursor:crosshair;
margin:auto;
}
#info{
position:absolute;
width:52px;
padding:4px;
border:1px solid #000;
background-color:#ffc;
font-family:verdana,arial,helvetica,sans-serif;
font-size:10px;
display:none;
}
</style><script type="text/javascript">
function init(){
if(window.addEventListener){
document.getElementById('box').addEventListener('mousemove',curPos,false)
}
else {
if(window.attachEvent){
document.getElementById('box').attachEvent('onmousemove',curPos);
}
}
obj=document.getElementById('info');
document.getElementById('box').onmouseout=function() {
obj.style.display='none';
}
}function curPos(event){
el=document.getElementById('box');
obj.style.display='block';l=event.clientX
t=event.clientY;
w=l-el.offsetLeft;
h=t-el.offsetTop;if(/*@cc_on!@*/false){
obj.firstChild.nodeValue='x='+(w-2)+'px y='+(h-2)+'px';
obj.style.top=(h+10)+'px';
obj.style.left=(w+10)+'px';
}
else{
obj.firstChild.nodeValue='x='+w+'px y='+h+'px';
obj.style.top=(h+12)+'px';
obj.style.left=(w+12)+'px';
}
}
if(window.addEventListener){
window.addEventListener('load',init,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',init);
}
}
</script></head>
<body><div id="box">
<span id="info"> </span>
</div></body>
</html>
No problem, you're very welcome. ;)
