nezumi.pngをGIMPでGIFアニメにしてみよう。
同様にして、左回転するGIFアニメを作成して、nezumi_l.gifとする。HTMLファイルの"nezumi.png"を"nezumi_r.gif"と"nezumi_l.gif"に書き換えて完成である。
画像を変更するときは、img要素の場合srcプロパティで画像ファイルを指定して変更できる。 ネズミのimg要素を子要素として含むdiv要素がelementで与えられている場合は、childNodes[]プロパティでリストを参照できる。
var chldnode = element.childNodes[1]; chldnode.src = "nezumiswimming.gif";
のように、chldnodeがimg要素のとき、srcプロパティで画像ファイルを変更できる。
chldnodeがimg要素か否かをチェックするために、以下を試してみると良い。
var chldnode = element.childNodes[1]; alert(chldnode);
としてみると、[object HTMLImageElement]と表示される。
因みに、
var chldnode = element.childNodes[0]; alert(chldnode);
としてみると、[object Text]と表示される。 これは、
<div id="Nezumi1" class="icon" style="top:300px; left:200px;" > [ここにテキストが書ける] <img src="nezumi_r.gif" onmouseUp=... > </div>
となっているので、<div>直下の部分の[ここにテキストが書ける]部分がchildNodes[0]で、その次の<img>がchildNodes[1]になっていることがわかる。
(2015-07-06追加)
ネズミが池に落ちても消えないで、池の中で溺れている画像を表示するために、ネズミの画像を変更するだけではなく、下の画像のようにして、z-indexプロパティを5から1へ変更することで、背景画像(z-index: 2)と背景色(z-index: 0)の中間に来るようにしている。
また、ネズミが池に落ちているか否かは、ネズミのz-indexプロパティが、1か否かで判断するようにした。そのために、
var nezumi2 = document.getElementById("Nezumi2");
if(element.style.zIndex == "1" ){ return; }
池に落ちたネズミをクリックしても動かないのは、池に落ちたネズミのz-indexが1なのに、穴の領域のz-indexが3である(更に、背景画像のz-indexが2なので、穴からはみ出していても同じこと)ので、ネズミをクリックしているつもりでも、穴の領域(或いは背景画像)をクリックしているため、ネズミがクリックできなくなっているからである。これは少しトリッキーな処理の仕方であるが、コードを少なくする工夫の一つである。