jquery - How can I toggle between 2 images

Question

Im trying to use this code to toggle between a play and pause button but it doesn't seem to be working. How can I get it toggle between the 2 images when the are clicked

http://jsfiddle.net/aFzG9/1/

$("#infoToggler").click(function()
{
    if($(this).html() == "<img src="http://tympanus.net/PausePlay/images/play.png" width="60px" height="60px"/>")
    {
        $(this).html("<img src="http://maraa.in/wp-content/uploads/2011/09/pause-in-times-of-conflict.png width="60px" height="60px"/>");
    }
    else
    {
        $(this).html("<img src="http://tympanus.net/PausePlay/images/play.png" width="60px" height="60px"/>");
    }
});

Thanks

Answer 1

Pure HTML/CSS

label.tog > input {
  display: none; /* Hide the checkbox */
}

label.tog > input + span {
  text-indent: -9000px; /* Make text Accessible but not visible */
  display: inline-block;
  width: 24px;
  height: 24px;
  background: center / contain no-repeat url("//i.stack.imgur.com/gmP6V.png"); /*Play*/
}

label.tog > input:checked + span {
  background-image: url("//i.stack.imgur.com/ciXLl.png"); /*Pause*/
}

<label class="tog">
  <input type="checkbox" checked>
  <span>Button Play Pause</span>
</label>