SITEMAP [初めてのホームページ講座] [JavaScript , DHTML] [十字カーソル(CADみたい)]

十字カーソル(CADみたい)

機能

マウスポジションを中心に十字カーソルを表示します。この十字カーソルはマウスの動きに合わせて移動し、如何にもCADツールに似ていることからこの名称となったわけです。

カーソルの色の変更が可能です。

類似サンプル

なし

利用方法

ヘッダに必要な全てのスタイル、スクリプトを記述します。 BODY要素のonload属性に「Init()」を指定し、BODY要素内の任意の場所にDIV要素を２つ記述します。これがカーソルになります。

背景色はCSSで指定しています。サンプルでは黒になっていますが、変更は可能です。「body{background-color: #000;}」のカラーコードを変更して下さい。

十字カーソルの色: Col：カラーネームで指定します。

対応ブラウザ

IE4,IE5,NN4,N6

サンプル

［サンプルを見る］［ダウンロード］

[Go To Top]

ソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="ja">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>十字カーソル(CADみたい)</title>

<style type="text/css">
<!--
body{
	background-color:	#000;
}
.Style1{
	position:			absolute;
	top:				0px;
	left:				0px;
	width:				1px;
	height:				1px;
	font-size:			1px;
}
-->
</style>

<script language="JavaScript">
<!--
var Col = "lightgreen";		//十字カーソルの色

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;
	}
}

//ウインドウサイズ取得
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="Style1" id="iLud"> </div>
<div class="Style1" id="iLlr"> </div>

</body>
</html>

[Go To Top]