マウスカーソルを中心にクロスラインを引きます。
Sample


<HTML>
<HEAD>
<TITLE>Crossline cursor</TITLE>
<STYLE TYPE="text/css">
<!--
BODY{ background-color:#000000; } //背景色
.lineStyle{
  position:absolute;
  top:0px;
  left:0px;
  width:1px;
  height:1px;
  font-size:1px;
}
-->
</STYLE>
<SCRIPT TYPE="text/javascript">
<!--
var Col = "red";		//ラインの色
var winx,winy;
var sFlag = false;
var count = 0;
var my = 0;
var mx = 0;
var lay;
var coln;

if(document.all){
  document.onmousemove = Mmove;
}
else if(document.layers){
  window.captureEvents(Event.MOUSEMOVE);
  window.onMouseMove = Mmove;
}
else if(document.getElementById){
  document.onmousemove = Mmove;
}

function Mmove(e){
  if(document.all){
  mx = event.x;
  my = event.y;
}
else if(document.layers){
  mx = e.pageX;
  my = e.pageY;
}
else if(document.getElementById){
  mx = e.pageX;
  my = e.pageY;
}

if(mx < 0) mx = 0;
if(mx >= winx) mx = winx - 1;
if(my < 0) my = 0;
if(my >= winy) my = winy - 1;
if(sFlag) main();
}

function Init(){
  winx = GetWindowSize("width");
  winy = GetWindowSize("height");
  if(document.all){
    document.all("iLud").style.backgroundColor = Col;
    document.all("iLud").style.top = my;
    document.all("iLud").style.height = winy;
    document.all("iLlr").style.backgroundColor = Col;
    document.all("iLlr").style.left = mx;
    document.all("iLlr").style.width = winx;
  }
  else if(document.layers){
    document.layers["iLud"].bgColor = Col;
    document.layers["iLud"].clip.top = my;
    document.layers["iLud"].clip.left = 0;
    document.layers["iLud"].clip.right = 1;
    document.layers["iLud"].clip.bottom = winy;
    document.layers["iLlr"].bgColor = Col;
    document.layers["iLlr"].clip.top = 0;
    document.layers["iLlr"].clip.left = mx;
    document.layers["iLlr"].clip.right = winx;
    document.layers["iLlr"].clip.bottom = 1;
  }
  else if(document.getElementById){
    document.getElementById("iLud").style.backgroundColor = Col;
    document.getElementById("iLud").style.top = my;
    document.getElementById("iLud").style.height = winy;
    document.getElementById("iLlr").style.backgroundColor = Col;
    document.getElementById("iLlr").style.left = mx;
    document.getElementById("iLlr").style.width = winx;
  }
  sFlag = true;
}

function main(){
  if(document.all){
    document.all("iLud").style.left = mx;
    document.all("iLlr").style.top = my;
  }
  else if(document.layers){
    document.layers["iLud"].moveTo(mx,0);
    document.layers["iLlr"].moveTo(0,my);
  }
  else if(document.getElementById){
    document.getElementById("iLud").style.left = mx;
    document.getElementById("iLlr").style.top = my;
  }
}

//get window size
function GetWindowSize(type){
  switch(type){
  case "width":
  if(document.all){
  return(document.body.clientWidth);
  }
  else if(document.layers){
    return(innerWidth);
  }
  else if(document.getElementById){
    return(innerWidth);
  }
  else{
    return(-1);
  }
  break;
  case "height":
  if(document.all){
    return(document.body.clientHeight);
  }
  else if(document.layers){
    return(innerHeight);
  }
  else if(document.getElementById){
    return(innerHeight);
  }
  else{
    return(-1);
  }
  break;
  default:
  return(-1);
  break;
  }
}
//-->
</SCRIPT>
</HEAD> 
<BODY onLoad="Init()">
  <DIV CLASS="lineStyle" ID="iLud">&nbsp;</DIV>
<DIV CLASS="lineStyle" ID="iLlr">&nbsp;</DIV>
</BODY> </HTML>

BACK