画像をウィンドウの中央に表示する

画像を、ウィンドウの中央に表示します。ウィンドウをリサイズした時も、位置を再計算します。IE4.0、Netscape 4.*/6.* に対応しています。

<html>
<head>
<title>テスト</title>
<script>
function func() {
  if (document.all) {                     // for Internet Explorer
    img.style.position = "absolute";
    img.style.posTop = (document.body.clientHeight - img.height) / 2;
    img.style.posLeft = (document.body.clientWidth - img.width) / 2;
  }
  else if (document.layers) {             // for Netscape Communicator 4.*
    img = document.layers["img1"].document.images["img"];
    document.layers["img1"].top = (window.innerHeight - img.height) / 2;
    document.layers["img1"].left = (window.innerWidth - img.width) / 2;
  }
  else if (document.getElementById) {     // for Netscape 6.*
    img = document.getElementById("img");
    img.style.position = "absolute";
    img.style.top = ((window.innerHeight - img.height) / 2) + "px";
    img.style.left = ((window.innerWidth - img.width) / 2) + "px";
  }
}
</script>
</head>
<body onload="func()" onresize="func()">
<layer name="img1">
<img name="img" id="img" src="image/kodomo4.gif" style="position:absolute">
</layer>
</body>
</html>

画像をウィンドウの中央に表示する

説明

ソースコード

動作確認