CODEWITHSUNDEEP
javascripthtml
WibblyWobbly
WibblyWobbly

Reputation: 145

Button background change on click

i'm trying to create custom controls for my HTML5 audio player.

At current, i have my Play/Pause button, however, on the button being clicked, i'd like to change the current Play background to a Pause symbol.

The JS works perfectly, just can't figure out how to switch backgrounds.

HTML5: 

<div id="myButtons">
<button id="playpause" title="play" onclick="togglePlayPause()"></button>
<input id="volume" min="0" max="1" step="0.1" type="range" onchange="setVolume()" />
<button id="mute" onclick="toggleMute()">Mute</button>
</div>

Javascript:

function togglePlayPause() {
   var playpause = document.getElementById("playpause");
   if (audio.paused || audio.ended) {
      playpause.title = "";
      playpause.innerHTML = "";
      audio.play();
   }
   else {
      playpause.title = "";
      playpause.innerHTML = "";
      audio.pause();
   }

Upvotes: 0

Views: 879

Answers (3)

zakelfassi
zakelfassi

Reputation: 2966

It could be better if you'd just add some classes :

.button-icon-play {
  background: url(...) /*other background styling stuff*/;
}

.button-icon-pause {
  background: url(...) /*other background styling stuff*/;
}

Add the button-icon-play by default to your element ,and then in your JS, just do :

/*Switch to pause button*/
playpause.className = 'button-icon-pause';

/*Switch to play button*/
playpause.className = 'button-icon-play';

Upvotes: 1

Navnath Godse
Navnath Godse

Reputation: 2225

Try this

function togglePlayPause() {

       var playpause = document.getElementById("playpause");

       if (audio.paused || audio.ended) {
          playpause.style.backgroundImage="url(play.png)";
          playpause.title = "";
          playpause.innerHTML = "";
          audio.play();
       }
       else {
          playpause.style.backgroundImage="url(pause.png)";
          playpause.title = "";
          playpause.innerHTML = "";
          audio.pause();
       }
}

Upvotes: 1

btevfik
btevfik

Reputation: 3431

you can set the css value using jquery

var playpause = $("#playpause");
var foo = false;

    playpause.click(function(){
        if(foo===false){
        playpause.css("background", pause-background-url);
         foo=true;
        }
        else{
          foo=false;
         playpause.css("background", play-background-url);
        }
    }};

Upvotes: 0

Related Questions