3249

Спасибо. Прописал картинки в скрипте и все заработало function mute(btn,elem){ var video = document.getElementById(elem); if (video.muted){ video.muted = false; btn.innerHTML = "Выкл."; btn.src="icon/audio.png"; } else{ video.muted = true; btn.innerHTML = "Вкл."; btn.src="icon/no-audio.png"; } }

Добрый день. Столкнулся с такой проблемой. Я сделал кнопку при нажатии на которую включается звук у видео, при повторном нажатии звук выключается. У кнопки есть картинка в виде значка выключенного звука. Как сделать чтоб при нажатии на кнопку значок менялся на нужный и при повторном нажатии значок менялся обратно. При этом кнопка должна продолжать выполнять свою функцию. HTML <div align="right"> <input type="image" src="icon/no-audio.png" onclick="mute(this, 'vid1')" class="knopka01" value=""> </div> </section> _______________________________________________________________________________________ CSS .knopka01 { display: inline-block; width: 40px; height: 30px; line-height: 50px; font-size: 20px; text-align: center; text-decoration: none; text-shadow: 0 1px rgba(255,255,255,.2), 0 -1px rgba(0,0,0,.8); outline: none; border: none; border-radius: 100px; background: rgb(255, 255, 255) radial-gradient(150% 100% at 50% 5px, rgba(255,255,255,.2), rgba(0,0,0,0)); box-shadow: inset rgba(0,0,0,.6) 0 -2px 5px, inset rgba(252,255,255,.7) 0 2px 5px, rgba(0,0,0,.8) 0 2px 5px -1px; color: rgb(0,255,0); user-select: none; } .knopka01:hover { color: rgb(255,69,0); cursor: pointer; } .knopka01:active { padding-bottom: 1px; box-shadow: inset rgba(0,0,0,1) 0 1px 3px, inset rgba(0,0,0,.6) 0 -2px 5px, inset rgba(252,255,255,.7) 0 2px 5px, 0 1px rgba(255,255,255,.08); color: rgb(0,255,214); } ____________________________________________________________________________________________________________ JS function mute(btn,elem){ var video = document.getElementById(elem); if (video.muted){ video.muted = false; btn.innerHTML = "Выкл."; } else{ video.muted = true; btn.innerHTML = "Вкл."; } }