JavaScript サンプル：『マウスストーカーを作ってみる４』

説明

静止画像を入れ替えながら、マウスの後を追っかけさせてみます。

実行例

▼マウスを動かすと、下の画像がついていきます。

コード

var bwType = null;
var trgObj = null;
var mousePosX;
var mousePosY;
var page_flag = false;
var load_flag = false;
var image_flag = false;

function setImage() {
	if ( load_flag == false ) {
		if ( image_flag ) {
			load_flag = true;
			pageLoad();
		} else {
			image_flag = true;
			window.document.ball.src = "./b.gif";
		}
	}
}

function pageLoad (){
	if ( page_flag ) {
		if ( load_flag ) {
			setTimeout( "changeImage(true);", 500 );
		}
	} else {
		page_flag = true;
	}
}

function changeImage(flag) {
	if ( flag ) {
		window.document.ball.src = "./a.gif";
		setTimeout( "changeImage(false);", 500 );
	} else {
		window.document.ball.src = "./b.gif";
		setTimeout( "changeImage(true);", 500 );
	}
}


function moveObj() {
	var posX = mousePosX + 15;
	var posY = mousePosY + 15;
	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 mouseMove(e) {
	if ( bwType == 1 ) {
		mousePosX = document.body.scrollLeft + event.clientX;
		mousePosY = document.body.scrollTop + event.clientY;
		moveObj();
	} else {
		mousePosX = e.pageX;
		mousePosY = e.pageY;
		moveObj();
	}	
}

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

function formLoad( 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.MOUSEMOVE );
			break;
		default:
			return;
	}
	document.onmousemove = mouseMove;
}

<BODY onLoad="formLoad( 'moveBall' );pageLoad();">
<SPAN id="ball" style="position:absolute;">
<IMG src="./a.gif" width="22" height="22" name="ball" onLoad="setImage();">
</SPAN>

解説＆ステップアップ

『静止画像をアニメーションさせてみる』と、『マウスストーカーを作ってみる３』を合わせただけです。
NN(確認ver.4.7)でエラーが出ます。現在改定中です。

動作確認

IE5.0(win)、IE5.5(win)、~~NN4.7(win)~~