制作带图像的开/关按钮

-1

我有两个图像，sound_on.png和sound_off.png。两者具有相同的高度和尺寸。制作带图像的开/关按钮

我想附一个JavaScript以下行动：

当从sound_off.png到sound_on.png按下的图像变化和播放声音
当再次按下按钮它改变从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";}}

来源

2012-09-19 Ewald Bos

对不起，我的意思是调用onClick命令的图像引用 –

为什么两个图像而不是一个？这似乎是一个类似切换的工作 – Gabber

请直接在现有的切换功能，通话声音功能：

function togglestyle(el){ 

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

来源

2012-09-19 20:36:21

这个脚本结合的伎俩以及

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

但我不知道会有办法检测音频何时结束播放并返回到关闭状态并集成trird选项，暂停音频（带有暂停图像）并继续播放音频？有任何想法吗？

来源

2012-09-19 21:23:41

制作带图像的开/关按钮

回答

相关问题