JavaScript of
Let's dance with だんご三兄弟
これはJavaAppletではなく、JavaScriptとして作成しました.
あなたのホームページにもコピーしてご自由にお使い下さい...NHKの著作権に触れない範囲で...
SCRIPT記述の部分について
＜SCRIPT language="JavaScript"＞
＜!--
//
// JavaScript of Let's dance with だんご三兄弟
// オリジナル作品 by BokerTov 1999.4.18
// http://www2t.biglobe.ne.jp/~BokerTov/music/
// E-mail: BXA02635@nifty.ne.jp
//
＜function Moving(num){document.myImg.src="fig/dango_a"+num+".gif";}
//--＞
＜/SCRIPT＞
関数 Moving(num) の説明：
num=1,2,3,4
変数myImgに画像fig/dango_a1.gif、、、画像fig/dango_a4.gifをセット.
実際には、マウス動作 onMouseOver からの例外ハンドラーとして動作します.
body記述の部分について
＜body bgcolor="cornsilk"＞
＜table border="0" cellspacing="0" cellpadding="0"＞
＜tr＞
＜td＞
＜A HREF="magic.htm" onMouseOver="Moving(1);"＞
＜img src="fig/dango_b1.gif" border="0"＞＜/A＞
＜/td＞
＜td＞
＜A HREF="magic.htm" onMouseOver="Moving(2);"＞
＜img src="fig/dango_b2.gif" border="0"＞＜/A＞
＜/td＞
＜td＞
＜A HREF="magic.htm" onMouseOver="Moving(3);"＞
＜img src="fig/dango_b3.gif" border="0"＞＜/A＞
＜/td＞
＜/tr＞
＜tr＞
＜td＞
＜A HREF="magic.htm" onMouseOver="Moving(4);"＞
＜img src="fig/dango_b4.gif" border="0"＞＜/A＞
＜/td＞
＜td＞
＜img src="fig/dango_a2.gif" name="myImg"＞
＜/td＞
＜td＞
＜A HREF="magic.htm" onMouseOver="Moving(4);"＞
＜img src="fig/dango_b6.gif" border="0"＞＜/A＞
＜/td＞
＜/tr＞
＜tr＞
＜td＞
＜A HREF="magic.htm" onMouseOver="Moving(3);"＞
＜img src="fig/dango_b7.gif" border="0"＞＜/A＞
＜/td＞
＜td＞
＜A HREF="magic.htm" onMouseOver="Moving(2);"＞
＜img src="fig/dango_b8.gif" border="0"＞＜/A＞
＜/td＞
＜td＞
＜A HREF="magic.htm" onMouseOver="Moving(1);"＞
＜img src="fig/dango_b9.gif" border="0"＞＜/A＞
＜/td＞
＜/tr＞
＜/table＞
table構文の説明：
・論理的には3x3のテーブルを定義し、以下のように初期化しています.
table(1,1)に画像fig/dango_b1.gifをセット.
table(1,2)に画像fig/dango_b2.gifをセット.
table(1,3)に画像fig/dango_b3.gifをセット.
table(2,1)に画像fig/dango_b4.gifをセット.
table(2,2)に画像fig/dango_a2.gifをセット.
table(2,3)に画像fig/dango_b6.gifをセット.
table(3,1)に画像fig/dango_b7.gifをセット.
table(3,2)に画像fig/dango_b8.gifをセット.
table(3,3)に画像fig/dango_b9.gifをセット.
・中央の画像table(2,2)は動的に変化します、このために画像変数myImgを使用します.
＜img src="fig/dango_a2.gif" name="myImg"＞
・マウスがtableの要素に置かれたときに、例外ハンドラーMoving()を動作させます：
table(1,1)の位置では、
Moving(1)を起動して、myImgに画像fig/dango_a1.gifをセット.
＜A HREF="magic.htm" onMouseOver="Moving(1);"＞
table(1,2)の位置では、
Moving(2)を起動して、myImgに画像fig/dango_a2.gifをセット.
＜A HREF="magic.htm" onMouseOver="Moving(2);"＞
table(1,3)の位置では、
Moving(3)を起動して、myImgに画像fig/dango_a3.gifをセット.
＜A HREF="magic.htm" onMouseOver="Moving(3);"＞
以下、同様.
・注意："HREF=magic.htm" はダミーです. 実際にはそんなHTMLは用意していないので、
マウスをクリックしてもジャンプできずにエラーとなります.
画像の紹介
透明GIF画像で作ってありますので、背景色は何であっても透過できます.
dango_b1.gif
 |
dango_b2.gif
 |
dango_b3.gif
 |
dango_b4.gif
 |
dango_b6.gif
 |
dango_b7.gif
 |
dango_b8.gif
 |
dango_b9.gif
 |
dango_a1.gif
 |
dango_a2.gif
 |
dango_a3.gif
 |
dango_a4.gif
 |
Back to KARAOKE