Question

I am trying to create a function that will toggle between a play and a pause image. Below are my image tags:

<img id="pause_tail" src="images/Pause.png" />&nbsp;
<img id="resume_tail" src="images/Play.png" />

These are handled by jQuery to call the start/pause tail function accordingly:

$("#pause_tail").click(
function(){
    pauseTail();
});

$("#resume_tail").click(
function(){
    startTail();
});

Right now, all works fine and play and pause are next to each other. What I want to do is only have one image showing at a time. For instance, play, and when that is clicked the image changes to pause and vice versa. Whats the best way to go about this? Thanks!

Answer 1

You could do

<img id="pause_tail" src="images/Pause.png" />&nbsp;

$("#pause_tail").click( 
function(){

    var src = this.src;
    if(src.indexOf('Pause') === -1){
        //if there is no Pause in the src attribute currently is playing. 
        //Stop it and change image
        this.src = 'images/Pause.png';
        pauseTail();
     }else{
        //currently Paused, start it
        this.src = 'images/Play.png';
        startTail();
     }

});