How to switch between two button background images


I have this script and work fine between two audio files attcahed with one button.

I want to add two background images switched by click!

    .button {
     background: url(picture1.png) no-repeat;  /* Green */
    border: none;
    color: white;
 width: 200px;
 height: 200px;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
   font-size: 25px;
  cursor: pointer;

<audio id="audio1" src="audio1mp3"></audio>
<audio id="audio2" src="audio2.mp3"></audio>
 <button id="controls" class="button">click 1</button>


   var button = document.getElementById("controls");
   var track1 = document.getElementById("audio1");
  var track2 = document.getElementById("audio2");

   button.onclick = function(){
   currTrackNo = this.innerHTML.replace(/click /, "");
   nextTrackNo = (currTrackNo == "1")? "2" : "1";
   this.innerHTML = "Click " + nextTrackNo;

   if (currTrackNo == "1"){;
    } else {;

Thanks for all


Hi there mohammadsaid1980,

and a warm welcome to these forums. :winky:

Check out the attachment to see a possible solution. (14.4 KB)



Hi coothead,

Thank you very much…it works fantastic!

But…I want to change click on/of to another word…when I changed it in script

  ( function( d ) {
  'use strict';
   var button = d.getElementById( 'controls' ),
   track1 = d.getElementById( 'audio1' ),
   track2 = d.getElementById( 'audio2' );

  button.addEventListener( 'Switch', 
     if ( this.value === 'Switch On' ) {
       this.value = 'Switch Off';
       this.classList.add( 'image-setting' );;
     } else {
       this.value='Switch On';
       this.classList.remove( 'image-setting' );;
       }, false );
     }( document ));

The script audio and image didn’t worked!

Any more edited needed?


I think I got it…I must not change

 button.addEventListener( 'Switch',

it must be :

   button.addEventListener( 'click',


Hi there mohammadsaid1980,

yes, that is correct…

button.addEventListener( 'click',

…defines the event handler,



Yeah…Many thanks for you it works now with edited my picture :smile:


        No problem, you’re very welcome. :winky:


Just one more question please…If I want to hide click 1, click 2 which are the values from appearing on top of picture, what shall I do?

Thanks again


Hi there mohammadsaid1980,

I am not sure what you mean. :wonky:

I thought that you had changed them to “Switch On” and “Switch Off” :winky:



Yeah I changed them into switch on and Off but I am thinking the switch On and Off not to appear as text in top of picture.:roll_eyes: Like another option


Hi there mohammadsaid1980,

so where would you like them to be?



Hi coothead ,

Actually I don’t want to see it in picture like hide from picture and not show. Is there any transparent color? :rolleyes:


Yeah solved!

I replaced color

    color:   transparent;

and removed shadow :wink:


Hi there mohammadsaid1980,

if you don’t want to display the text, why do you need it?



Yes you are right i did’t like what you said!


What if I want to add more than one with different Audio source and pictures?:wink:


I created another js file and another separate audio files then call them from html with special id as well!

I am gonna to test it:grin:


Hi coothead,

Thank you very much every is fine now! I am really appreciate your help. :grin:


Create a style for the element with the background-image set to now of the images.
Then create a style class(“alt-background”) with the other image as the background-image.
Then in the click event a element.classList.toggle(“alt-background” will toggle the class to either be present or missing.