如何在html中创建一个只有静音/取消静音按钮（如youtube） [英] How to create a only mute/unmute button (like youtube) in html

问题描述

我创建了一个网站，我放了背景音乐，我的问题是我不知道如何创建一个按钮（只有一个），用于静音/取消静音。我想有一个静音按钮，可以根据情况静音/取消静音（如果音乐静音，那么按钮应该有一个扬声器的图像，听到的声音，如果你按它，然后你开始听音乐和

我现在是这样：

 < td width = 10％valign =topalign =right> 
< img src =images / sonidoON.pngonclick =this.src ='images / sonidoOFF.png'width = 30％height = 7％> 
< / td> 
  

我只需要知道如何创建该按钮，而不是背景音乐的功能。 p>

非常感谢。

解决方案

strong>

 < input type =checkboxname =un-muteid =un-mute> 
< label for =un-muteclass =unmute> 
< img src =http://upload.wikimedia.org/wikipedia/commons/3/3f/Mute_Icon.svgalt =Mute_Icon.svgtitle =静音图标> 
< / label> 
< label for =un-muteclass =mute> 
< img src =http://upload.wikimedia.org/wikipedia/commons/2/21/Speaker_Icon.svgalt =Speaker_Icon.svgtitle =取消静音/喇叭图示> 
< / label> 
  

CSS

  input＃un-mute {
 display：none; 
} 
 
 .unmute img {
 display：none; 
} 
 
输入＃un-mute：checked〜.unmute img {
 display：initial; 
} 
 
输入＃un-mute：checked〜.mute img {
 display：none; 
} 
  

JavaScript

  var un_mute = document.getElementById（'un-mute'）; 
 
 un_mute.onclick = function（）{
 alert（'toggle player here'）; 
}; 
  

http://jsfiddle.net/Ffccv/2/

使用：checked pseudo-class selector

I was creating a website, I put background music, and my problem is I dont know how to create a button(only one) for mute/unmute the sound. I would like to have a mute button that can mute/unmute depending on the situation(if the music is muted then the button should have the image of a Loudspeaker,for hearing the sound, if you press it then you begin listening the music and the image of the button changes and vice versa)

what I have now is this:

<td width=10% valign="top" align="right">
                            <img  src="images/sonidoON.png" onclick="this.src='images/sonidoOFF.png'" width=30% height=7%>
                        </td>

I only need to know how to create that button, not the functions for the background music.

Thank you very much in advance

解决方案

HTML

<input type="checkbox" name="un-mute" id="un-mute">
<label for="un-mute" class="unmute">
    <img src="http://upload.wikimedia.org/wikipedia/commons/3/3f/Mute_Icon.svg" alt="Mute_Icon.svg" title="Mute icon">
</label>
<label for="un-mute" class="mute">
    <img src="http://upload.wikimedia.org/wikipedia/commons/2/21/Speaker_Icon.svg" alt="Speaker_Icon.svg" title="Unmute/speaker icon">
</label>

CSS

input#un-mute {
  display: none;
}

.unmute img {
  display: none;
}

input#un-mute:checked ~ .unmute img {
  display: initial;
}

input#un-mute:checked ~ .mute img {
  display: none;
}

JavaScript

var un_mute = document.getElementById('un-mute');

un_mute.onclick = function() {
   alert('toggle player here');
};

http://jsfiddle.net/Ffccv/2/

using :checked pseudo-class selector

这篇关于如何在html中创建一个只有静音/取消静音按钮（如youtube）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！