SITEMAP [初めてのホームページ講座] [JavaScript , DHTML] [ウインドウリムーブ]

ウインドウリムーブ

機能

リンク先のウインドウを開いたときにウインドウサイズと位置を指定し、その後そのウインドウの位置を変更するスクリプトです。使い方次第では面白い演出や、便利な機能を盛り込むことも出来そうです。

類似サンプル

利用方法

HEAD部分にスクリプトを記述します。 BODY部分にはイベントを指定します。

A要素にHREF属性でリンク先を「JavaScript:void(0)」にします。この他にも、mouseovere,onmouseoutのイベントハンドラを設定します。このイベント発生時に呼び出す関数はそれぞれ「ChgWindow('move','up')」「StopWindow()」を指定します。

ChgWindow('move','up')

引数は２つあり、１つ目（move）は固定です。これを「resize」にするとウインドウを移動させるようになります（ウインドウリサイズ参照）。２つ目の引数「up」は以下のようになっています。全て小文字で記述します。

up: 上に移動
right: 右に移動
down: 下に移動
left: 左に移動

この関数がコールされると移動を実行します。

StopWindow()

この関数がコールされると移動を中止します。

初期ウインドウサイズ

InitX，InitYで初期ウインドウのサイズを指定できます。それぞれ、幅・高さをピクセル単位で指定します。

リサイズ速度

ActSpeedで移動速度を指定できます。大きくするほど遅くなります。自然数を指定して下さい。

対応ブラウザ

IE4,NN4以上

サンプル

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

[Go To Top]

<!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>

<script language="JavaScript1.2">
<!--
//ブラウザのバージョンチェック
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 ActSpeed = 1;		//リサイズ速度　大=遅い
var InitX = 600;		//初期ウインドウサイズ幅
var InitY = 400;		//初期ウインドウサイズ高さ

var TimeID;
var Spd,Dir;
var Type1 = "non";
var Type2 = "non";
var fEvent = false;

function Init(){
	var scrX = GetScreenRealSize("width");
	var scrY = GetScreenRealSize("height");
	var x = scrX/2 - InitX/2;
	var y = scrY/2 - InitY/2;
	resizeTo(InitX,InitY);
	moveTo(x,y);
	ChgBy();
}

function ChgBy(){
	if(fEvent){
		switch(Type1){
			case "resize":
				switch(Type2){
					case "up":
						window.resizeBy(0,-1);
						break;
					case "right":
						window.resizeBy(1,0);
						break;
					case "down":
						window.resizeBy(0,1);
						break;
					case "left":
						window.resizeBy(-1,0);
						break;
				}
				break;
			case "move":
				switch(Type2){
					case "up":
						window.moveBy(0,-1);
						break;
					case "right":
						window.moveBy(1,0);
						break;
					case "down":
						window.moveBy(0,1);
						break;
					case "left":
						window.moveBy(-1,0);
						break;
				}
				break;
		}
	}
	TimeID = setTimeout("ChgBy()",ActSpeed);
}

function ChgWindow(Ty,Dir){
	Type1 = Ty;
	Type2 = Dir;
	fEvent = true;
}

function StopWindow(){
	Type1 = "non"
	Type2 = "non"
	fEvent = false;
}

function GetScreenRealSize(type){
	switch(type){
		case "width":
			return(screen.availWidth);
		break;
		case "height":
			return(screen.availHeight);
		break;
		default:
			return(-1);
		break;
	}
}

// -->
</script>

</head>

<body onload="Init()">

<table border="0">
<tr>
	<td>　</td>
	<td align="center">
		<a href="JavaScript:void(0)" onmouseover="ChgWindow('move','up')" onmouseout="StopWindow()">
			<img src="image/ya1.gif" alt="UP" border="0">
		</a>
	</td>
	<td>　</td>
</tr>
<tr>
	<td align="center">
		<a href="JavaScript:void(0)" onmouseover="ChgWindow('move','left')" onmouseout="StopWindow()">
			<img src="image/ya4.gif" alt="LEFT" border="0">
		</a>
	</td>
	<td><img src="image/bot2.gif" alt="RESIZE" border="0"></td>
	<td align="center">
		<a href="JavaScript:void(0)" onmouseover="ChgWindow('move','right')" onmouseout="StopWindow()">
			<img src="image/ya2.gif" alt="RIGHTP" border="0">
		</a>
	</td>
</tr>
<tr>
	<td>　</td>
	<td align="center">
		<a href="JavaScript:void(0)" onmouseover="ChgWindow('move','down')" onmouseout="StopWindow()">
			<img src="image/ya3.gif" alt="DOWN" border="0">
		</a>
	</td>
	<td>　</td>
</tr>
</table>

</body>
</html>

[Go To Top]