| ポイント |
<![CDATA[
iW = imgObj.width; // 画像の横幅
iH = imgObj.height; //画像の縦幅
wW = document.body.clientWidth; // ウィンドウの横幅
wH = document.body.clientHeight; // ウィンドウの縦幅
cx = (wW - iW) / 2;
cy = (wH - iH) / 2;
]]>
|
| 説 明 |
画像をウィンドウの中央に表示するにはウィンドウの横幅から画像の横幅を減算し２で割ります。縦幅も同様に処理し、スタイルのtop, leftプロパティに計算した値を入れます。Netscape 4以降ではウィンドウの横幅はwindow.innerWidth、縦幅はwindow.innerHeightに入っています。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>画像をウィンドウの中央に表示する（Netscape）</title>
<script language="JavaScript"><!--
function setCenter()
{
imgObj = document.images["BTN"];
iW = imgObj.width; // 画像の横幅
iH = imgObj.height; //画像の縦幅
wW = window.innerWidth; // ウィンドウの横幅
wH = window.innerHeight; // ウィンドウの縦幅
cx = (wW - iW) / 2;
cy = (wH - iH) / 2;
imgObj.style.left = cx;
imgObj.style.top = cy;
}
// --></script>
</head>
<body onLoad="setCenter()">
<img src="button.gif" name="BTN" width="128" height="48" style="position:absolute;top:0px;left:0px">
</a>
</body>
</html>
]]>
|
| 補足説明 |
SafariでもNetscapeと同様の方法でセンタリングすることができます。 |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
画像をウィンドウの中央に表示する（Netscape, Safari）