How to switch between two button background images

JavaScript
1

Hi,
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!

 <body>
  <style>
    .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;
}
</style>

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


 <script>

   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"){
     track1.play();
     track2.pause();
    } else {
     track2.play();
     track1.pause();
   }
 }

Thanks for all

2

Hi there mohammadsaid1980,

and a warm welcome to these forums. :winky:

Check out the attachment to see a possible solution.

mohammadsaid1980.zip (14.4 KB)

coothead

1 Like
3

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', 
   function(){
     if ( this.value === 'Switch On' ) {
       this.value = 'Switch Off';
       this.classList.add( 'image-setting' );
       track1.play();
       track2.pause();
     } else {
       this.value='Switch On';
       this.classList.remove( 'image-setting' );
       track2.play();
       track1.pause();
        }
       }, false );
     }( document ));

The script audio and image didn’t worked!

Any more edited needed?

4

I think I got it…I must not change

 button.addEventListener( 'Switch',

it must be :

   button.addEventListener( 'click',
5

Hi there mohammadsaid1980,

yes, that is correct…

button.addEventListener( 'click',

…defines the event handler,

coothead

1 Like
6

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

7

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

8

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

9

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:

coothead

10

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

11

Hi there mohammadsaid1980,

so where would you like them to be?

coothead

12

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:

13

Yeah solved!

I replaced color

    color:   transparent;

and removed shadow :wink:

14

Hi there mohammadsaid1980,

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

coothead

1 Like
15

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

16

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

17

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:

18

Hi coothead,

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

19

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.

20

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