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

Dynamic HTMLの参考書 Java Scriptの参考書

ウインドウリサイズ

機能

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

類似サンプル

  1. ちびウインドウ
  2. ウインドウリムーブ
  3. FULL SCREEN SCRIPT
  4. ウィンドウコントローラ

利用方法

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

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

ChgWindow('resize','up')
引数は2つあり、1つ目(resize)は固定です。これを「move」にするとウインドウを移動させるようになります(ウインドウムーブ参照)。 2つ目の引数「up」は以下のようになっています。全て小文字で記述します。
up
上にリサイズ
right
右にリサイズ
down
下にリサイズ
left
左にリサイズ
この関数がコールされるとリサイズを実行します。
StopWindow()
この関数がコールされるとリサイズを中止します。
初期ウインドウサイズ
InitXInitYで初期ウインドウのサイズを指定できます。それぞれ、高さをピクセル単位で指定します。
リサイズ速度
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('resize','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('resize','left')" onmouseout="StopWindow()">
			<img src="image/ya4.gif" alt="LEFT" border="0">
		</a>
	</td>
	<td><img src="image/bot1.gif" alt="RESIZE" border="0"></td>
	<td align="center">
		<a href="JavaScript:void(0)" onmouseover="ChgWindow('resize','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('resize','down')" onmouseout="StopWindow()">
			<img src="image/ya3.gif" alt="DOWN" border="0">
		</a>
	</td>
	<td> </td>
</tr>
</table>

</body>
</html>
[Go To Top]

Last modified Nov,2000
Copyright(C)2000 T.Miyazaki , All Rights Reserved.