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)


1 Like

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,


1 Like

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?


1 Like

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.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.