CrossHairs Follow Mouse

[Total: 0    Average: 0/5]

This displays crosshairs on the page.

Head Code:

<style>
<!--
#leftright, #topdown{
position:absolute;
left:0;
top:0;
width:1px;
height:1px;
layer-background-color:gray;
background-color:gray;
z-index:100;
font-size:1px;
}
-->
</style>
<script>
var isNS4=document.layers?true:false;
var isIE=document.all?true:false;
var isIE6=isIE&&document.getElementById?true:false;
var isIE4=isIE&&!isIE6?true:false;
var isNS6=!isIE6&&document.getElementById?true:false;
var isNS=isNS4||isNS6;
</script>

Body Code:

DATA ON PAGE
<div id="leftright"></div>
<div id="topdown"></div>
<script>
if (isIE4)
{
  leftright.style.width=document.body.clientWidth-2;
  topdown.style.height=document.body.clientHeight-2;
}
else if (isNS4)
{
  document.leftright.clip.width=window.innerWidth
  document.leftright.clip.height=1
  document.topdown.clip.width=1
  document.topdown.clip.height=window.innerHeight
}
else if(isIE6)
{
  document.getElementById("leftright").style.width=document.body.clientWidth-2;
  document.getElementById("topdown").style.height=document.body.clientHeight-2;
}
else if(isNS6)
{
  document.getElementById("leftright").style.width=window.innerWidth-2;
  document.getElementById("topdown").style.height=window.innerHeight-2;
}


function followMouse_IE()
{
  leftright.style.pixelTop=document.body.scrollTop+event.clientY+1
  topdown.style.pixelTop=document.body.scrollTop
  if (event.clientX<document.body.clientWidth-2)
    topdown.style.pixelLeft=document.body.scrollLeft+event.clientX+1
  else
    topdown.style.pixelLeft=document.body.clientWidth-2
}

function followMouse_NS4(e)
{
  document.leftright.top=e.y+1
  document.topdown.top=pageYOffset
  document.topdown.left=e.x+1
}

var NO=false;
function followMouse_NS6(e)
{ 
  x=e.pageX; 
  y=e.pageY; 
  document.getElementById("leftright").style.top=1+y;
  document.getElementById("topdown").style.top=pageYOffset;
  document.getElementById("topdown").style.left=1+x;
} 

function initCrossHairs()
{
  if(isNS4)
  {
    document.captureEvents(Event.MOUSEMOVE); 
    document.onmousemove=followMouse_NS4; 
  }
  else if(isNS6)
    document.addEventListener("mousemove", followMouse_NS6, true);
  else if(isIE)
    document.onmousemove=followMouse_IE;
}
initCrossHairs();
</script>

Times Viewed: 1

Leave a Reply

Your email address will not be published. Required fields are marked *