## 画像を自動的に動かす

トップ > アラカルト > 画像を自動的に動かす

#### ■ 説明

Internet Explorer 4.0や、Netscape Communicator 4.0のダイナミックHTML技術を用いて、画面が開いた時や、何かをクリックした時に、テキストや画像を自動的に動かすことができます。

#### ■ 実例

#### ■ ソースコード

    <html>
    <head>
    <title>テスト</title>
    <style type="text/css">
    <!--
    .abs { position:absolute; }
    -->
    </style>
    <script language="JavaScript">
    <!--
    var delta = 10;
    function func() {
       if (document.all) {
          document.all.E1.style.posLeft += delta;
          left = document.all.E1.style.posLeft;
       } else if (document.layers) {
          document.layers["N1"].left += delta;
          left = document.layers["N1"].left;
       } else {
          return;
       }
       if ((left < 10) || (200 < left)) {
          delta = -delta;
       }
       window.setTimeout("func()", 100);
    }
    // -->
    </script>
    </head>
    <body onload="func()">
    <ilayer id="N1">
    <img id="E1" src="xx.gif" width=56 height=69 class=abs>
    </ilayer>
    </body>
    </html>

#### ■ 動作確認

IE4.0/5.0(Win)、IE4.0(Mac)、Netscape 4.0(Win)で動作確認しています。IE2.0(Win)、Netscape 2.0/3.0(Win)では動作はしませんがエラーが発生しないことを確認しています。

Netscape 4.0(Win)では、レイヤ内のタグにSTYLE属性を指定すると、以降のスタイルシート指定が無効化されたりするバグがあるようです。STYLE属性の代わりにCLASS属性を使用すると、とりあえず回避できるとの情報をいただきました。

Copyright (C) 1999-2001 杜甫々
初版：1999年6月20日、最終更新：2001年4月15日
http://www.tohoho-web.com/wwwxx025.htm