リンクボタンサウンド付 カスタマイズ方法　　　　赤字削除変更不可、青字設定箇所、グレーは必要のない部分（解説）です。

音を鳴らす際は、イベントハンドラの onclick="" を使用しています。


<HTML XMLNS:t="urn:schemas-microsoft-com:time">
<HEAD>
<TITLE>ボタンサウンド付き</TITLE>
<STYLE type="text/css">
.time{behavior: url(#default#time2);}
DIV{position:absolute;top:-120;left:0;}
INPUT{position:absolute;text-align:center;width:120;top:0;left:0;}
</STYLE>
スタイルシートに関しての解説はこれ以降は割愛します。確認等をしたい人はこちらの一覧を参照してください。
<?IMPORT namespace="t" implementation="#default#time2">
</HEAD>

　　　　　　　　
click.wav（5.64KB） サンプルと同じ音でいいという方は
アイコンをクリックして保存してください。

サンプル以外のものも少し用意しました。音の長さがサンプルと異なります。
落下や、飛来する時間を変更してください。
byon.wav（1.69KB） 0.83秒、mp-3形式
hit.wav（2.03KB） 1.00秒、mp-3形式
hit2.wav（5.50KB） 0.25秒、PCM形式
laser.wav（1.79KB） 0.16秒、PCM形式

<BODY>
<BGSOUND id="fly" src="" loop=3><BGSOUND id="fly2" src="" loop=5>
<EMBED src="click.wav" autostart="false" hidden="true">
id="fly" src="" loop=3 BGSOUND（IEのみ）を使います。任意のIDをつけ、音ファイルのURLは空欄にします（src=""）。
音の繰り返し回数を指定します。（loop=3）
id="fly2" src="" loop=5 　　　同　　上
<EMBED src="click.wav" autostart="false" hidden="true"> ここちょっとミソかも・・・・BGSOUNDではなしに、あえて、EMBEDタグを使って使用する音ファイルを先読みっぽくしています。
クリックと同時に音をすぐに鳴らしたいでしょ？autostart="false" hidden="true"を忘れずに、、、、、


<INPUT id="bt0" type="button" value="MENU OPEN" style="position:relative;top:0;left:-10;" onclick="fly2.src='click.wav'">
id="bt0" 任意のID
value="MENU OPEN" ボタンに記入される値
position:relative; 位置の指定、この場合は相対位置に指定している。
top:0;left:-10; 実際の表示位置よりも上から0ピクセル、左に10ピクセル移動したい地に表示するように指定。
onclick="fly2.src='click.wav'" クリックされたときに、IDが fly2 の src にclick.wav を入れるように指定している。これによって音が鳴る。


<DIV id="bt1">
<INPUT id="bt1_0" type="button" value="CLICK!!" style="z-index:1;" onclick="fly.src='click.wav'">
<INPUT id="bt1_1" type="button" onclick="location='#'" value="Sub1">
<INPUT id="bt1_2" type="button" onclick="location='#'" value="Sub2">
<INPUT id="bt1_3" type="button" onclick="location='#'" value="Sub3"></DIV>
<DIV id="bt1"> 裏に隠れているsub1〜3のボタンも一緒に落とすために同時に落ちるボタンをDIVでくくる。
id="bt1_0" それぞれのボタンに任意のIDをつける。
z-index:1; こうすることによって、SUBボタンよりもメインボタンのほうが上に来る。
onclick="fly.src='click.wav'" クリックされたときに、IDが fly2 の src にclick.wav を入れるように指定している。これによって音が鳴る。


<t:animateMotion targetElement="bt1_1" begin="bt1_0.click" values="-360,-360;120,0;120,0" dur="0.2" autoreverse="false" fill="hold" />
<t:animateMotion targetElement="bt1_2" begin="bt1_0.click+.2" values="-360,-240;240,0;240,0" dur="0.2" autoreverse="false" fill="hold" />
<t:animateMotion targetElement="bt1_3" begin="bt1_0.click+.4" values="-360,-120;360,0;360,0" dur="0.2" autoreverse="false" fill="hold" />
targetElement="bt1_1" 動かすボタンのIDを指定
begin="bt1_0.click" 移動を開始させるときを指定。
values="-360,-360;120,0;120,0" valuesに移動させる際の座標を入れる。
dur="0.2" 移動するのにかかる時間を指定。
autoreverse="false" 繰り返しの指定。この場合はない。
fill="hold" 移動を終了した場所にボタンとどまらせるかどうか。この場合は、とどまるように指定。
以下も同様に指定します。

<DIV id=bt2>
<INPUT id="bt2_0" type="button" value="CLICK!!" style="z-index:1;" onclick="fly.src='click.wav'">
<INPUT id="bt2_1" type="button" onclick="location='#'" value="Sub1">
<INPUT id="bt2_2" type="button" onclick="location='#'" value="Sub2">
<INPUT id="bt2_3" type="button" onclick="location='#'" value="Sub3"></DIV>
<t:animateMotion targetElement="bt2_1" begin="bt2_0.click" values="800,-360;120,0;120,0" dur="0.2" autoreverse="false" fill="hold" />
<t:animateMotion targetElement="bt2_2" begin="bt2_0.click+.2" values="800,-240;240,0;240,0" dur="0.2" autoreverse="false" fill="hold" />
<t:animateMotion targetElement="bt2_3" begin="bt2_0.click+.4" values="800,-120;360,0;360,0" dur="0.2" autoreverse="false" fill="hold" />

<DIV id=bt3>
<INPUT id="bt3_0" type="button" value="CLICK!!" style="z-index:1;" onclick="fly.src='click.wav'">
<INPUT id="bt3_1" type="button" onclick="location='#'" value="Sub1">
<INPUT id="bt3_2" type="button" onclick="location='#'" value="Sub2">
<INPUT id="bt3_3" type="button" onclick="location='#'" value="Sub3"></DIV>
<t:animateMotion targetElement="bt3_1" begin="bt3_0.click" values="-120,1200;120,0;120,0" dur="0.2" autoreverse="false" fill="hold" />
<t:animateMotion targetElement="bt3_2" begin="bt3_0.click+.2" values="-120,1200;240,0;240,0" dur="0.2" autoreverse="false" fill="hold" />
<t:animateMotion targetElement="bt3_3" begin="bt3_0.click+.4" values="-120,1200;360,0;360,0" dur="0.2" autoreverse="false" fill="hold" />

<DIV id=bt4>
<INPUT id="bt4_0" type="button" value="CLICK!!" style="z-index:1;" onclick="fly.src='click.wav'">
<INPUT id="bt4_1" type="button" onclick="location='#'" value="Sub1">
<INPUT id="bt4_2" type="button" onclick="location='#'" value="Sub2">
<INPUT id="bt4_3" type="button" onclick="location='#'" value="Sub3"></DIV>
<t:animateMotion targetElement="bt4_1" begin="bt4_0.click" values="800,1200;120,0;120,0" dur="0.2" autoreverse="false" fill="hold" />
<t:animateMotion targetElement="bt4_2" begin="bt4_0.click+.2" values="800,1200;240,0;240,0" dur="0.2" autoreverse="false" fill="hold" />
<t:animateMotion targetElement="bt4_3" begin="bt4_0.click+.4" values="800,1200;360,0;360,0" dur="0.2" autoreverse="false" fill="hold" />

<DIV id=bt5>
<INPUT id="bt5_0" type="button" value="CLICK!!" style="z-index:1;" onclick="fly.src='click.wav'">
<INPUT id="bt5_1" type="button" onclick="location='#'" value="Sub1">
<INPUT id="bt5_2" type="button" onclick="location='#'" value="Sub2">
<INPUT id="bt5_3" type="button" onclick="location='#'" value="Sub3"></DIV>
<t:animateMotion targetElement="bt5_1" begin="bt5_0.click" values="-120,-360;120,0;120,0" dur="0.2" autoreverse="false" fill="hold" />
<t:animateMotion targetElement="bt5_2" begin="bt5_0.click+.2" values="-120,-240;240,0;240,0" dur="0.2" autoreverse="false" fill="hold" />
<t:animateMotion targetElement="bt5_3" begin="bt5_0.click+.4" values="-120,-120;360,0;360,0" dur="0.2" autoreverse="false" fill="hold" />

<t:animate id="t0" targetElement="bt1" attributeName="top" from="0" to="70" begin="t1.end" dur=".2" fill="hold" />
<t:animate id="t1" targetElement="bt2" attributeName="top" from="0" to="100" begin="t2.end" dur=".2" fill="hold" />
<t:animate id="t2" targetElement="bt3" attributeName="top" from="0" to="130" begin="t3.end" dur=".2" fill="hold" />
<t:animate id="t3" targetElement="bt4" attributeName="top" from="0" to="160" begin="t4.end" dur=".2" fill="hold" />
<t:animate id="t4" targetElement="bt5" attributeName="top" from="0" to="190" begin="bt0.click" dur=".2" fill="hold" />
</BODY>
</HTML>