右の画像をクリックするとマウスに画像が付いてきます。クリックするとその場に画像が残ります。
このページではこの３枚の画像を使っています。
click1.gif→最初の状態
click2.gif→止まっている状態
click3.gif→動いている状態 
<HTML>
<HEAD>
<TITLE>Mouse Stoker</TITLE>
<SCRIPT TYPE="text/javascript">
<!--
var bwType = null;
var trgObj = null;
var downFlag = false;
var mousePosX;
var mousePosY;

function moveLayer() {
	var posX = mousePosX + 5;
	var posY = mousePosY + 5;
	if ( bwType == 1 ) {
		trgObj.style.posLeft = posX;
		trgObj.style.posTop = posY;
	} else if ( bwType == 2 ) {
		trgObj.style.left = posX;
		trgObj.style.top = posY;
	} else {
		trgObj.moveTo( posX, posY );
	}
}

function mouseDown(e) {
	if ( downFlag ) {
        window.document.onp.src = "image/click2.gif";
		downFlag = false;
	} else {
        window.document.onp.src = "image/click3.gif";
		downFlag = true;
		mouseMove(e);
	}
}

function mouseMove(e) {
	if ( downFlag ) {
		if ( bwType == 1 ) {
			mousePosX = document.body.scrollLeft + event.clientX;
			mousePosY = document.body.scrollTop + event.clientY;
			moveLayer();
		} else {
			mousePosX = e.pageX;
			mousePosY = e.pageY;
			moveLayer();
		}
	}
}

function bwCheck(){
	if ( document.all ) {
		return (1);
	} else if ( document.getElementById ) {
		return (2);
	} else if ( document.layers ) {
		return (3);
	} else {
		return (null);
	}
}

function Init( id ){
	bwType = bwCheck();
	switch ( bwType ) {
		case 1:
			trgObj = document.all( id );
			break;
		case 2:
			trgObj = document.getElementById( id );
			break;
		case 3:
			trgObj = document.layers[ id ];
			document.captureEvents( Event.MOUSEDOWN | Event.MOUSEMOVE );
			break;
		default:
			return;
	}
	document.onmousedown = mouseDown;
	document.onmousemove = mouseMove;
}
//-->
</SCRIPT>
</HEAD>
<BODY onLoad="Init('mouse')">
<DIV ID="mouse" STYLE="position:absolute;; width: 24; height: 32; left: 400px; top: 50px">
  <IMG NAME="onp" SRC="image/click1.gif" WIDTH="24" HEIGHT="32"></DIV>
BACK