-1

sound_on.pngとsound_off.pngの2つの画像があります。どちらも同じ高さと寸法です。

次のアクションのためにJavaScriptを添付したいと思います。

  1. 押された画像がsound_off.pngからsound_on.pngに変わり、サウンドが再生されたとき
  2. ボタンをもう一度押すと、sound_on.pngからsound_off.pngに戻り、onclickコマンドでサウンドが停止します。

現在、次のコード行があります。

<a href="#" onClick="playAudio();"><img src="images/general/sound-on.png" width="40" height="32"></a>
<a href="#" onClick="stopAudio();"><img src="images/general/sound-off.png" width="40" height="32"></a>

上記の例のように作成するには、どのコードが必要ですか？

私はこの部分を持っています：

<style type="text/css">
.on {background-image:url url(images/general/sound-off.png)); background-repeat:no-repeat;}
.off {background-image:url(images/general/sound-on.png); background-repeat:no-repeat;}
</style>
<script language="javascript">
function togglestyle(el){if(el.className == "on") {el.className="off";} else {el.className="on";}}
</script>

ボタンのこのDIVを使用して：

div id="onoff" class="playlist_btn"><img src="images/general/sound-off.png" width="50 height="50" onclick="togglestyle(onoff)"></div>

これでトグルができますが、onclickコマンドを接続してオーディオを再生し、再び停止する方法は今のところわかりません。

こんな感じでしょうか？

function togglestyle(el){if(el.className == "on" onClick="playAudio()") {el.className="off" onClick"stopAudio()";} else {el.className="on";}}
4

2 に答える 2

1

既存のトグル関数から直接サウンド関数を呼び出すだけです。

function togglestyle(el){

    if(el.className == "on") {
        el.className="off";
        stopAudio();
    }
    else {
        el.className="on";
        playAudio();
    }
}
于 2012-09-19T20:36:21.013 に答える
0

このスクリプトを組み合わせると、トリックも実行されます

<script>
function showHide(elementid){
if (document.getElementById(elementid).style.display == 'none'){
document.getElementById(elementid).style.display = '';
} else {
document.getElementById(elementid).style.display = 'none';
}
}

function hideShow(elementid){
if (document.getElementById(elementid).style.display == ''){
document.getElementById(elementid).style.display = 'none';
} else {
document.getElementById(elementid).style.display = '';
}
}
</script>


<img id="on" src="images/general/sound-off.png" width="40" height="32" onClick="javascript:hideShow('on'); javascript:showHide('off'); javascript:playAudio()" alt="on">
<img id="off" src="images/general/sound-on.png" width="40" height="32" onClick="javascript:hideShow('off'); javascript:showHide('on')" style="display:none;" alt="off">

しかし、オーディオの再生が終了したことを検出してオフ状態に戻り、3番目のオプションを統合して、オーディオを一時停止し（一時停止画像を使用）、オーディオが残っていた場所から続行する方法があるのではないかと思っていました。何か案は？

于 2012-09-19T21:23:41.853 に答える