SITEMAP [初めてのホームページ講座] [JavaScript , DHTML] [のぞき穴]

のぞき穴

機能

画像を始めは隠しておき、マウス通過の際に指定した領域のみ見えるようにしたスクリプトです。表示する領域の指定が可能です。

利用方法

HEAD部分にスタイルとスクリプトを記述します。 BODY部分には、任意の場所にDIV要素に対してID属性iL1を指定します。

改造方法

のぞき見られる領域の変更が可能です。

領域: 変数SHOWsizeの数値を変更します。縦横のサイズをピクセル数で指定するもので、形状は正方形です。

対応ブラウザ

IE4,NN4以上(IE5は一部IEのバグにより正常に動作しません)

サンプル

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>

<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;
	top:			50px;
	left:			50px;
	visibility:		hidden;
}
-->
</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 SHOWsize = 40;		//表示する領域
var lay;

function Init(){
	if(iIE4){
		lay = document.all("iL1");
		lay.style.visibility = "visible";
		document.onmousemove = Mmove;
	}
	if(iNN4){
		window.captureEvents(Event.MOUSEMOVE);
		lay = document.layers["iL1"];
		lay.visibility = "show";
		window.onmousemove = Mmove;
	}
}

function Mmove(e){
	X = mouseX(e) - getX(lay) - SHOWsize;
	Y = mouseY(e) - getY(lay) - SHOWsize;
	W = mouseX(e) - getX(lay);
	H = mouseY(e) - getY(lay);
	if(iIE4){
		lay.style.clip = 'rect('+Y+','+W+','+H+','+X+')';
	}
	if(iNN4){
		lay.clip.top = Y;
		lay.clip.right = W;
		lay.clip.bottom = H;
		lay.clip.left = X;
	}
}

function mouseX(e){
	if(iIE4){
		return document.body.scrollLeft + event.clientX;
	}
	if(iNN4){
		return e.pageX;
	}
}

function mouseY(e){
	if(iIE4){
		return document.body.scrollTop + event.clientY;
	}
	if(iNN4){
		return e.pageY;
	}
}

function getX(layName){
	if(iIE4){
		return lay.style.pixelLeft;
	}
	if(iNN4){
		return lay.left;
	}
}

function getY(layName){
	if(iIE4){
		return lay.style.pixelTop;
	}
	if(iNN4){
		return lay.top;
	}
}
// -->
</SCRIPT>

</HEAD>

<BODY onload="Init()">

<P>
マウスを画面上で動かしてみて下さい。
</P>
<DIV CLASS="Style1" ID="iL1">
<IMG SRC="image/maintitle.gif">
</DIV>

</BODY>
</HTML>

[Go To Top]