Question

I want the image background of the button to change when the user clicks on it.
I made a class containig different attributes to switch between the images based on their class.
I use this method:

HTML:

     <span id="play"></span>

JS:

    $(document).ready(function(){
    $('#play').click(function(){

    $(this).toggleClass("#pause");
    });
    });

CSS:

    #play
    {
   width:100px;
   height:60px;
   background-image: url('18.jpg');
   float:left;
    }
   #pause
   {
  width:100px;
  height:60px;
  background-image: url('19.jpg');
  float:left;
   }

But the image isn’t displayed at all, neither when before I click on the button, nor after it, do you know why ?

Thanks

Answer 1

The problem is that #pause is not the name of a css class but an id.

You should have something like this

HTML:

     <span id="play" class="play"></span>

JS:

    $(document).ready(function(){
        $('#play').click(function(){                             
            $(this).toggleClass("pause");
            $(this).toggleClass("play");
        });
    });

CSS:

.play
{
    width:100px;
    height:60px;
    background-image: url('18.jpg');
    float:left;
}
.pause
{
    width:100px;
    height:60px;
    background-image: url('19.jpg');
    float:left;
}