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!

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!

• javascript
• jquery
• html

6 Answers 6

Is it not better to toggleClass of some element and add styling with these images?

Smth like this http://jsfiddle/fEYC3/

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();
     }

});

In the pause click function call

Pause.hide() And Resume.show()

This is something like this:

$("#pause_tail").click(
function(){
    pauseTail();
    $("#resume_tail").css({ 'display': 'display'});
    $("#pause_tail").css({ 'display': 'none'});
});

$("#resume_tail").click(
function(){
    startTail();
    $("#resume_tail").css({ 'display': 'none'});
    $("#pause_tail").css({ 'display': 'display'});
});

The options bellow are valid too..

I would just use 1 img tag and use a custom attribute "mode" to specify which state it is currently in, like this:

<img id="play_pause" src="images/Play.png" mode="play" />

Then in your jQuery, based on the mode, swap the image:

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

    var imgSrc = this.src;
    if(imgSrc.attr("mode") === "play"){
        this.src = 'images/Pause.png';
        pauseTail();
    }
    else{
        this.src = 'images/Play.png';
        startTail();
    }
});

In my experience the best way to do it is via toggling a class. This allows the browser to preload the image for both states (play/pause) so that there isn't a flicker the first time it has to load the second image. Here is an example:

<style>
    #pause { display: none; } // Set the pause button to be not shown
    .playing #play { display: none; } // Hide the play button when it starts playing
    .playing #pause { display: inline-block; } // Show the pause button when it starts playing
</style>
<script>
    $("#playPause").click(function(){
        // Do stuff when clicked
        $(this).toggleClass("playing"); // Toggle the playing class on/off
    });
</script>
<div id="playPause" class="play>
    <img src="play.png" id="play">
    <img src="pause.png" id="pause">
</div>