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

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

#### ■ 説明

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

#### ■ ソースコード

    <html>
    <head>
    <title>テスト</title>
    <script type="text/javascript">
    <!--
    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;
        img.style.left = (window.innerWidth - img.width) / 2;
      }
    }
    // -->
    </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 杜甫々
http://www.tohoho-web.com/wwwxx030.htm