JavaScript サンプル：『マウスが乗ったときだけアニメーションさせてみる』

説明

マウスが乗ったときに、画像のアニメーションを開始させてみます。

実行例

▼マウスを乗せてみてください

コード

var page_flag = false;
var load_flag = false;
var image_flag = false;
var timeID

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

function pageLoad () {
	page_flag = true;
}

function startChange( flag ) {
	if (flag ) {
		if ( load_flag && page_flag ) {
			timeID = setTimeout( "changeImage(true);", 300 );
		}
	} else {
		clearTimeout( timeID );
	}
}

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

<BODY onLoad="pageLoad()">
<A href="xxx.html" onMouseOver="startChange(true);" onMouseOut="startChange(false);">
<IMG src="a.gif" width="22" height="22" name="ball" onLoad="setImage();" border="0">
</A>

解説＆ステップアップ

『静止画像をアニメーションさせてみる』と、『マウスが乗ったとき画像を変更させてみる』を、合わせたものです。

動作確認

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