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

トップ > アラカルト > 画像をウィンドウの中央に表示する

説明

画像を、ウィンドウの中央に表示します。ウィンドウをリサイズした時も、位置を再計算します。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>

動作確認

IE6.0(Win)、Netscape 4.73/6.1(Win) での動作確認をしています。


Copyright (C) 2002-2015 杜甫々
初版:2002年9月8日、最終更新:2015年8月23日
http://www.tohoho-web.com/wwwxx030.htm