アニメーション応用

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

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

<img src="images/n0.png" alt=""
 id="area1"  onmouseover="anime()" onmouseout="stopanime()" />

var n=5;
function anime(){
  document.getElementById("area1").src = "images/n" + n + ".png";
  n = n + 1;
  if ( n > 9 ) { n = 0;}
  ani1timer = setTimeout("anime()",1);
}
function stopanime(){
  clearTimeout(ani1timer);
}

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

いぬ
ねこ
かもめ
はと

<p><a class="sb" href="doubutsu/kemono/inu.html"
 onmouseover="btnfl('btnf1')" onmouseout="stopbtnfl('btnf1')">
<img src="images/blue.gif" alt="" id="btnf1" />いぬ</a></p>

<p><a class="sb" href="doubutsu/kemono/neko.html"
 onmouseover="btnfl('btnf2')" onmouseout="stopbtnfl('btnf2')">
<img src="images/blue.gif" alt="" id="btnf2" />ねこ</a></p>
......

fl = 0;
function btnfl(Bname){
  if ( fl == 0 ){
     document.getElementById(Bname).src = "images/skyblue.gif";
     fl = 1;
  }else if( fl == 1 ){
     document.getElementById(Bname).src = "images/blue.gif";
     fl = 0;
  }
  dm = Bname;
  fltimer = setTimeout("btnfl(dm)",50);
}
function stopbtnfl(Bname){
  clearTimeout(fltimer);
  document.getElementById(Bname).src = "images/blue.gif";
}

スロットマシン

<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>

working=false; bns=0;
na=0; nb=0; nc=0;
sa=-1;sb=-1;sc=-1;
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からは「人目をひくページ」という名前のリンクから行けるようにすること。