K14 K13にインタラクティブなストップボタンを追加する

ボタンに触るとボタン選択サインが点灯し、クリックするとボタンが緑に発光して大仏ムービーがストップします。サイン画像とボタンはなるべく小さく納めて重くならない様にしてあります。ムービーで使っているImageオブジェクトはNN3.0,IE4.0から使えます。

応用 :
画像を取り替えてオリジナルムービーを作りましょう。
参照 : オブジェクトの有無を調べる if(document.images){命令}, new, Array(), Image(), src, function, document.images[index番号], clearTimeout(), javascript, onMouseOver, onMouseOut, 変数, if(条件){命令1}else{命令2}, onClick,

Sample

Source

ソース
(コピーしてお使いください)

*太字は前ページとの変更追加箇所

<html>
<head>
<title></title>

<script language="JavaScript">

//ボタン処理ここから---------------------

/*************************************
  ボタン用イメージの事前読み込み
**************************************/

if(document.images)
{

   //クリックされた時のボタン(カラーボタン)を読み込む
  btClickimg = new Array()
  btClickimg[0] = new Image();btClickimg[0].src ="BSTON.GIF";
  btClickimg[1] = new Image();btClickimg[1].src ="BPLON.GIF";

   //マウスが触った時のボタン(グレーボタン)を読み込む
  btOverimg = new Array();
  btOverimg[0] = new Image();btOverimg[0].src ="BSTOF.GIF";
  btOverimg[1] = new Image();btOverimg[1].src ="BPLOF.GIF";

   //マウスが離れた時のボタン(グレーボタン)を読み込む
  btOutimg = new Array();
  btOutimg[0] = new Image();btOutimg[0].src ="BSTOF.GIF";
  btOutimg[1] = new Image();btOutimg[1].src ="BPLOF.GIF";

   //マウスがボタンに触った時のサイン画像(白)を読み込む
  siOverimg = new Array();
  siOverimg[0] = new Image();siOverimg[0].src ="SINON.GIF"

   //マウスがボタンから離れた時のサイン画像(黒)を読み込む
  siOutimg = new Array();
  siOutimg[0] = new Image();siOutimg[0].src ="SINOF.GIF"

}

/******************************************
  ボタンをOver/Out/Click時の処理
******************************************/
fl=0;//ONしている画像NO

   //ボタンの初期化(グレーボタンにする)
function B01Ini(bt){
  if(document.images)
    document.images['BTN'+bt].src= btOutimg[bt].src
}

   //サイン画像の初期化(黒にする)
function SinB01Ini(bt){
  if(document.images)
    document.images['SIGN'+bt].src= siOutimg[0].src
}

   //ストップボタンをクリックされた時(onClick)の処理
function B01ClickST(bt){
  if(document.images){
    B01Ini(fl);//ボタンの初期化
    document.images['BTN'+bt].src= btClickimg[bt].src;//(カラーボタンにする)
    fl=bt;
    clearTimeout(timeID);//(ムービーを止める)
  }
}

   //スタートボタンをクリックされた時(onClick)の処理
function B01ClickPL(bt){
  if(document.images){
    B01Ini(fl);//ボタンの初期化
    document.images['BTN'+bt].src= btClickimg[bt].src;//(オレンジボタンにする)
    fl=bt;
    movSpeed=120;
    animation1();
  }
}

   //マウスがボタンに触った時(onMouseOver)にサイン画像を黒にする
function B01Over(bt){
  if(document.images)
    document.images['SIGN'+bt].src=siOverimg[0].src
}

   //マウスがボタンから離れた時(onMouseOut)にサイン画像を白にする
function B01Out(bt){
  if(document.images)
    document.images['SIGN'+bt].src= siOutimg[0].src
}

//ボタン処理ここまで-------------------

//ムービー処理ここから-------------------

//変数の初期設定
var movKazu = 16 //ムービーに使う画像枚数
var imgNo   = 0  //0番目の画像からムービーをスタートする
var timeID  = 0  //タイマー
var movSpeed     // x/1000秒のスピードで動かす

//イメージの事前読み込み
if(document.images){

  movimg = new Array()

  //ムービーファイルの設定
  for(i=0;i<movKazu;i++){
    movimg[i]     = new Image()
    movimg[i].src = 'D'+i+'.GIF'
  }

}

//アニメーション
function animation1(){

  //アニメーション本体はたったのこれだけ^^;
  if(imgNo<movKazu){

    document.images['imgA'].src = movimg[imgNo].src
    timeID = setTimeout("animation1()",movSpeed)
    imgNo++

  } else {

    clearTimeout(timeID)

  }

}

//ムービー処理ここまで---------------------

</script>

</head>
</body>
<!--ムービー画面-->
<img src="D0.GIF" name="imgA" height=73 width=96 border='0'><br>

<!--サイン画像-->
<img src='SINOF.GIF' name='SIGN0' width="24" height="2" border='0'
><img src='SINOF.GIF' name='SIGN1' width="24" height="2" border='0'
><br>

<!--button画像-->
<a href="javascript:B01ClickST(0)"
   onMouseOver="B01Over(0)"
   onMouseOut="B01Out(0)"
><img src='BSTOF.GIF' name='BTN0'
   width="24" height="12" border='0'
></a><a href="javascript:B01ClickPL(1)"
   onMouseOver="B01Over(1)"
   onMouseOut="B01Out(1)"
><img src='BPLOF.GIF' name='BTN1'
   width="24" height="12" border='0'></a><br>
</body>
</html>

説明はソース内のコメントとK11,K12,K13を参照
使用した画像 :
D0.GIF D1.GIF D2.GIF D3.GIF
D4.GIF D5.GIF D6.GIF D7.GIF
D8.GIF D9.GIF D10.GIF D11.GIF
D12.GIF D13.GIF D14.GIF D15.GIF
SINOF.GIF SINON.GIF
BPLOF.GIF BPLON.GIF BSTOF.GIF BSTON.GIF