画像を自動的に動かす

1999年6月20日初版、2000年6月12日改版

■ 説明

Internet Explorer 4.0や、Netscape Navigator 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;
   }
   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)、NN4.0(Win)で動作確認しています。IE2.0(Win)、NN2.0/3.0(Win)では動作はしませんがエラーが発生しないことを確認しています。
NN4.0(Win)では、レイヤ内のタグにSTYLE属性を指定すると、以降のスタイルシート指定が無効化されたりするバグがあるようです。STYLE属性の代わりにCLASS属性を使用すると、とりあえず回避できるとの情報をいただきました。