アニメーション応用

マウスが重なると動き始める

とめるテクニックが必要。

まず、例によって元の絵を 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";
}

課題 ファイル名 anime2.html

画像交換を使って人目をひくページをつくりなさい。自作の画像を使うこと。

上記のテクニックは全部使う必要はない。必要に応じて組み合わせること

index.htmlからは「人目をひくページ」という名前のリンクから行けるようにすること。

一般的なDOMを使って

変更する画像の指定については前のページと同じなので省略

引数の問題は説明が必要ですが、あとで。


ウェブページ(Nov.2010)
聖愛中学高等学校
http://www.seiai.ed.jp/
Mar.2009 改訂