SITEMAP [初めてのホームページ講座] [JavaScript , DHTML] [マウス＆ターゲット]
Dynamic HTMLの参考書 Java Scriptの参考書

マウス＆ターゲット

機能

マウスの動きに画像がついてくるスクリプトです。 更に飛び回る画像にマウスポインタを重ねてクリックすると当たりを表示し、重なっていなければはずれを表示します。 ちょっとしたお遊びに使えます。 周囲８方向と中心の合わせて９方向に対応しています。

利用方法

HEAD部分にスタイルとスクリプトを記述します。 BODY部分には、DIV要素に対してID属性iLxy（３×３）を指定します。 そのDIV要素には、下表のようにそれぞれの方向の画像ファイルを指定します。

左上(eye00.gif)上(eye10.gif)右上(eye20.gif)
左(eye01.gif)中央(eye11.gif)右(eye21.gif)
左下(eye02.gif)下(eye12.gif)右下(eye22.gif)

更にBODY要素に、DIV要素３つを指定します。 このID属性は「iL0」〜「iL2」とし、それぞれ飛び回る画像用、当たり、はずれのメッセージ表示用です。

改造方法

各方向の画像ファイル、飛び回る画像、表示するメッセージを変更可能です。

画像ファイル
「利用方法」に従って、各方向（９方向）の画像ファイルを変更可能です。
飛び回る画像
DIV要素（クラスセレクタStyle3）内に指定している画像のURLを変更することで可能。 ただし、CSSのStyle3のサイズを変更すること。
メッセージのスタイル(Style4,#iL1,#iL2)
CSSリファレンスに従って、変更可。
メッセージ
DIV要素（クラスセレクタStyle4）内に指定しているテキスト（ここでは「大当たり！」「はずれ」）を変更することで可能。

対応ブラウザ

IE4,NN4以上

サンプル

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

<!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>マウス＆ターゲット</title>

<style type="text/css">
<!--
.Style1{
	position:	absolute;
}
.Style2{
	position:	absolute;
	left:		99%;
	top:		99%;
}
.Style3{
	position:	absolute;
	width:		88px;
	height:		31px;
}
.Style4{
	position:	absolute;
	width:		300px;
	height:		50px;
	visibility:	hiddeen;
}
#iL1{
	color:		#4444ff;
	font-size:	32pt;
	font-weight:	bold;
}
#iL2{
	color:		#ff4444;
	font-size:	32pt;
	font-weight:	bold;
}
-->
</style>

<script language="javascript" type="text/javascript">
<!--
//ブラウザのバージョンチェック
var brw_v = navigator.appVersion.charAt(0);
var brw_n = navigator.appName.charAt(0);
var iIE4 = false;
var iNN4 = false;
if((brw_v >= 4)&&(brw_n == "M"))iIE4 = true;
if((brw_v >= 4)&&(brw_n == "N"))iNN4 = true;

var Lflag = false;
var LaymaxX = 2;
var LaymaxY = 2;
var MainLay;
var lay=new Array();
	lay[0] = new Array();
	lay[1] = new Array();
	lay[2] = new Array();
var laySelect,bufSelect;
var laysw=new Array();
var showNO;
var X,Y;
var imXL,imXR,imYL,imYR;
var imW,imH;
var layX = 1;
var layY = 1;
var bufX = 1;
var bufY = 1;
var dX,dY;

var actX = 3;
var actY = 2;
var leftX,topX;
var scrX,scrY;
var lay2;
var TimeID;
var scrW,scrH;

var actT = 5;

if(iIE4){
	document.onmousemove = Mmove;
	document.onmousedown = Mdown;
}
if(iNN4){
	window.captureEvents(Event.MOUSEMOVE);
	window.captureEvents(Event.MOUSEDOWN);
	window.onmousemove = Mmove;
	window.onmousedown = Mdown;
}

function Init(){
	if(iIE4){
		with(MainLay = document.all.mainL){
			for(i = 0; i <= LaymaxX; i++){
				for(j = 0; j <= LaymaxY; j++){
					lay[i][j] = document.all("iL"+i+j).style;
					lay[i][j].visibility = "hidden";
				}
			}
			imW = MainLay.document.all(0).document.images[1].width;
			imH = MainLay.document.all(0).document.images[1].height;
		}
		laysw[1] = document.all("iL1").style;
		laysw[2] = document.all("iL2").style;
		laysw[1].visibility = "hidden";
		laysw[2].visibility = "hidden";
	}
	if(iNN4){
		with(MainLay = document.layers.mainL){
			for(i = 0; i <= LaymaxX; i++){
				for(j = 0; j <= LaymaxY; j++){
					lay[i][j] = document.layers["iL"+i+j];
					lay[i][j].visibility = "hide";
				}
			}
			imW = lay[0][0].document.images[0].width;
			imH = lay[0][0].document.images[0].height;
		}
		laysw[1] = document.layers["iL1"];
		laysw[2] = document.layers["iL2"];
		laysw[1].visibility = "hide";
		laysw[2].visibility = "hide";
	}
	laySelect = lay[layX][layY];
	bufSelect = lay[layX][layY];

	if(iIE4){
		scrX = document.body.clientWidth;
		scrY = document.body.clientHeight;
		lay2 = document.all("iL0").style;
//		scrW = lay2.posWidth;		//IE5対策
		scrW = parseInt(document.all("iL0").document.images["jL0"].width);
//		scrH = parseInt(lay2.posHeight);
		scrH = parseInt(document.all("iL0").document.images["jL0"].height);
		leftX = parseInt(Math.random()*scrX - scrW);
		topY = parseInt(Math.random()*scrY - scrH);
	}
	if(iNN4){
		scrX = innerWidth;
		scrY = innerHeight;
		lay2 = document.layers["iL0"];
		scrW = lay2.clip.width;
		scrH = lay2.clip.height;
		leftX = Math.random()*scrX - scrW;
		topY = Math.random()*scrY - scrH;
	}
	if(leftX <= 0)leftX = 1;
	if(topY <= 0)topY = 1;
	Lflag = true;
	scrollXY();
}

function Mdown(e){
	if(Lflag){
		HitCheck();
		layHide();
		if(iIE4){
			laysw[showNO].posLeft = imXL;
			laysw[showNO].posTop = imYL;
			laysw[showNO].visibility = "visible";
		}
		if(iNN4){
			laysw[showNO].left = imXL;
			laysw[showNO].top = imYL;
			laysw[showNO].visibility = "show";
		}
	}
}

function Mmove(e){
	clearTimeout(TimeID);
	scrollXY();
	if(Lflag){
		if(iIE4){
			X = event.clientX;
			Y = event.clientY;
			imXL = parseInt(MainLay.offsetLeft);
			imYL = parseInt(MainLay.offsetTop);
		}
		if(iNN4){
			X = e.pageX;
			Y = e.pageY;
			imXL = MainLay.left;
			imYL = MainLay.top;
		}
		imXR = imXL + imW;
		imYR = imYL + imH;
		layMove();
	}
}

function HitCheck(){
	showNO = 2;
	if(imXL <= leftX + scrW && imXL >= leftX){
//		if(imYL <= topY + scrY && imYL >= topY){		//bug
		if(imYL <= topY + scrH && imYL >= topY){
			showNO = 1;
		}
	}
	if(imXR <= leftX + scrW && imXR >= leftX){
//		if(imYR <= topY + scrY && imYR >= topY){		//bug
		if(imYR <= topY + scrH && imYR >= topY){
			showNO = 1;
		}
	}
}

function layHide(){
	if(Lflag){
		if(iIE4){
			laysw[1].visibility = "hidden";
			laysw[2].visibility = "hidden";
		}
		if(iNN4){
			laysw[1].visibility = "hide";
			laysw[2].visibility = "hide";
		}
	}
}

function layMove(){
	if(Lflag){
		bufX = layX;
		bufY = layY;
		if(X <= imXL + imW*1/5){
			layX = 0;
			dX = X;
		}else{
			if(X >= imXL + imW*4/5){
				layX = 2;
				dX = X - imW;
			}else{
				layX = 1;
				dX = X - imW/2;
			}
		}
		if(Y <= imYL + imH*1/5){
			layY = 0;
			dY = Y;
		}else{
			if(Y >= imYL + imH*4/5){
				layY = 2;
				dY = Y - imH;
			}else{
				layY = 1;
				dY = Y - imH/2;
			}
		}
		if(iIE4){
			bufSelect.visibility = "hidden";
			laySelect.visibility = "visible";
			MainLay.style.posLeft = dX;
			MainLay.style.posTop = dY;
		}
		if(iNN4){
			bufSelect.visibility = "hide";
			laySelect.visibility = "show";
			setTimeout('MainLay.moveTo(dX,dY)',actT);
		}
		laySelect = lay[layX][layY];
		bufSelect = lay[bufX][bufY];
	}
}

function scrollXY(){
	if(Lflag){
		if(iIE4){
			lay2.posLeft = leftX;
			lay2.posTop = topY;
			if(lay2.posLeft <= 0)actX = -actX;
			if(lay2.posLeft + scrW >= (scrX - actX))actX = -actX;
			if(lay2.posTop <= 0)actY = -actY;
			if(lay2.posTop + scrH >= (scrY - actY))actY = -actY;
		}
		if(iNN4){
			lay2.left = leftX;
			lay2.top = topY;
			if(lay2.left <= 0)actX = -actX;
			if(lay2.left + scrW >= (scrX - actX))actX = -actX;
			if(lay2.top <= 0)actY = -actY;
			if(lay2.top + scrH >= (scrY - actY))actY = -actY;
		}
		leftX = leftX + actX;
		topY = topY + actY;
		TimeID = setTimeout("scrollXY()",actT);
	}
}
// -->
</script>

</head>

<body onload="Init()">

<p>飛び回るバナーとマウスについてくるイメージを重ねてクリックすると当たり</p>

<div id="dummy" style="position:absolute;visibility:hidden"></div>
<div class="Style2" id="mainL">
<div class="Style1" id="iL00"><img src="image/eye00.gif" width="30" height="30" name="jL00"></div>
<div class="Style1" id="iL01"><img src="image/eye01.gif" width="30" height="30" name="jL01"></div>
<div class="Style1" id="iL02"><img src="image/eye02.gif" width="30" height="30" name="jL02"></div>
<div class="Style1" id="iL10"><img src="image/eye10.gif" width="30" height="30" name="jL10"></div>
<div class="Style1" id="iL11"><img src="image/eye11.gif" width="30" height="30" name="jL11"></div>
<div class="Style1" id="iL12"><img src="image/eye12.gif" width="30" height="30" name="jL12"></div>
<div class="Style1" id="iL20"><img src="image/eye20.gif" width="30" height="30" name="jL20"></div>
<div class="Style1" id="iL21"><img src="image/eye21.gif" width="30" height="30" name="jL21"></div>
<div class="Style1" id="iL22"><img src="image/eye22.gif" width="30" height="30" name="jL22"></div>
</div>

<div class="Style3" id="iL0"><img src="image/multi.gif" border="0" name="jL0"></div>
<div class="Style4" id="iL1">大当たり！</div>
<div class="Style4" id="iL2">はずれ</div>

</body>
</html>

修正履歴

2000.5.15
IE5がstyle.posWidthを取得できない不具合に対応。ヒットチェックのバグ修正。「Style4」にvisibility追加。
[Go To Top]
Last modified Mar,2000
Copyright(C)1999 T.Miyazaki , All Rights Reserved.