| ポイント |
<![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プロパティに計算した値を入れます。Internet Explorerの場合、ウィンドウの横幅はdocument.body.clientWidth、縦幅はdocument.body.clientHeightになります。（実際はbodyタグの横幅と縦幅） |
| サンプル |
<![CDATA[
<html>
<head>
<title>画像をウィンドウの中央に表示する</title>
<script language="JavaScript"><!--
function setCenter()
{
imgObj = document.images["BTN"];
iW = imgObj.width; // 画像の横幅
iH = imgObj.height; //画像の縦幅
wW = document.body.clientWidth; // ウィンドウの横幅
wH = document.body.clientHeight; // ウィンドウの縦幅
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>
]]>
|
| 補足説明 |
なし |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
画像をウィンドウの中央に表示する