とめるテクニックが必要。
まず、例によって元の絵を body の中に img タグで貼り付けます。そこにはやはり、id="area1" と名前を付けます。
加えてマウスが重なることでスタートする様に onmouseover、マウスが離れることで止まるように onmouseout を指定します。
bodyの中の記述
<img src="images/n0.png" alt="" id="area1" onmouseover="anime()" onmouseout="stopanime()" />
scriptには、動かすための anime() と止めるための stopanime() の2つの function を書きます。
scriptの中の記述
var i=5; var ani01timer; function anime(){ document.getElementById("area1").src = "images/n" + i + ".png"; i = i + 1; if ( i > 9 ) i = 0; ani01timer = setTimeout("anime()",1); } function stopanime(){ clearTimeout(ani01timer); }
変数 i を増やしていって n1.png n2.png n3.png ... と表示する画像の名前を指定していきます。もちろん画像はあらかじめ用意する必要があります。iが9より大きくなったら0に戻します。
そして setTimeout() を使って 1/1000 秒後に自分自身を再び実行する様にして繰り返しています。
止めるためには setTimeout() に名前をつけておいて、clearTimeout(名前)という風にその名前を指定することで止めます。ここでは ani01timer としましたが、2つの function で使われる変数なので、function の外側で宣言される必要があります。functionの前の行の var ani01timer; でそれをしています。
body の中にメニューのリンクを作ります。その中に img タグを置きます。それぞれのメニュー項目の画像を変化させますから、それぞれ別の名前をつけなければなりません。id="btn01", id="btn02", id="btn03", id="btn04" と名前を付けます。
それぞれマウスが重なることでスタートする様に onmouseover、マウスが離れることで止まるように onmouseout を指定します。
bodyの中の記述
<p><a class="sb" href="doubutsu/kemono/inu.html" onmouseover="btnfl('btn01')" onmouseout="stopbtnfl('btn01')"> <img src="images/blue.png" alt="" id="btn01" />いぬ</a></p> <p><a class="sb" href="doubutsu/kemono/neko.html" onmouseover="btnfl('btn02')" onmouseout="stopbtnfl('btn02')"> <img src="images/blue.png" alt="" id="btn02" />ねこ</a></p> ......
onmouseover=で指定するfunctionは統一してbtnflとし、btnfl('btn01') などと( )内にどのidが対象なのかを記入して区別することにします。このような記述を「引数」といいます。ダブルクォーテーションの中の文字列なのでシングルクォーテーションで囲っています。
scriptの中の記述
var fl = 0; var fltimer; var nm; function btnfl(Bname){ nm = Bname; if ( fl == 0 ){ document.getElementById(Bname).src = "images/skyblue.png"; fl = 1; }else if( fl == 1 ){ document.getElementById(Bname).src = "images/blue.png"; fl = 0; } fltimer = setTimeout("btnfl(nm)",50); } function stopbtnfl(Bname){ clearTimeout(fltimer); document.getElementById(Bname).src = "images/blue.png"; }
"btnfl('btn01')" を btnfl(Bname) で受けています。これで var Bname='btn01' と最初の行に書いたかの様に Bname を使うことができます。
ただし、この変数はfunctionの内部でしか有効ではありません。そのため setTimeout("btnfl(Bname)",50); とすると、「Bname is not defined」というエラーが出ます。次に実行するfunctionは自分自身なのですが、形は外部関数を呼び出しますので、内部の変数はいった先では有効でないということでしょう。値渡しなのでいいと思うのですが。
そこで nm という変数を外部に作っておいて、一旦それに値を代入してからそれを引数にしています。釈然としませんが動きます。
bodyの中の記述
<p> <img src="images/nst.png" alt="" id="area_s" onclick="startabc('start')" /> <img src="images/n0.png" alt="" id="area_a" onclick="stp('a')" /> <img src="images/n0.png" alt="" id="area_b" onclick="stp('b')" /> <img src="images/n0.png" alt="" id="area_c" onclick="stp('c')" /> </p>
scriptの中の記述
var working=false; var bns=0; var na=0; var nb=0; var nc=0; var sa=-1;var sb=-1;var sc=-1; var abctimer; function startabc(state){ if (state == 'start' && working ){ return } if (state == 'start'){ document.getElementById("area_s").src = "images/nof.png"; } working = true; if ( sa < 0 ){ na = na + 1; if ( na > 9 ) { na = 0; } document.getElementById("area_a").src = "images/n" + na + ".png"; } if ( sb < 0 ){ nb = nb + 1; if ( nb > 9 ) { nb = 0; } document.getElementById("area_b").src = "images/n" + nb + ".png"; } if ( sc < 0 ){ nc = nc + 1; if ( nc > 9 ) { nc = 0; } document.getElementById("area_c").src = "images/n" + nc + ".png"; } abctimer = setTimeout("startabc('cont')",1); } function stp(X){ if ( working ){ if (X=='a'){ sa = na; }else if(X=='b'){ sb = nb; }else if(X=='c'){ sc = nc; } if (sa>-1 && sb>-1 && sc>-1){ if (sa == sb && sb == sc){ // omedetou; reset(); }else if (bns==0){ if (sa == sb && bns ==0){sc=-1; bns=1;} if (sb == sc && bns ==0){sa=-1; bns=1;} if (sc == sa && bns ==0){sb=-1; bns=1;} if (sa>-1 && sb>-1 && sc>-1){ reset(); } }else{ reset(); } } } } function reset(){ clearTimeout(abctimer); sa=-1;sb=-1;sc=-1; working=false; bns = 0; document.getElementById("area_s").src = "images/nst.png"; }
画像交換を使って人目をひくページをつくりなさい。自作の画像を使うこと。
上記のテクニックは全部使う必要はない。必要に応じて組み合わせること
index.htmlからは「人目をひくページ」という名前のリンクから行けるようにすること。
変更する画像の指定については前のページと同じなので省略
引数の問題は説明が必要ですが、あとで。