画像を自動的に動かす画像を自動的に動かす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属性を使用すると、とりあえず回避できるとの情報をいただきました。