How can I switch between two images

Question

I am trying to use this code to switch between the play and pause button, but it does not seem to work. How can I make it switch between two images when a button is 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

Another maybe simpler way to handle this:

http://jsfiddle.net/M9QBb/1/

 $("#infoToggler").click(function() { $(this).find('img').toggle(); });​ <div id="infoToggler"><img src="http://tympanus.net/PausePlay/images/play.png" width="60px" height="60px"/> <img src="http://maraa.in/wp-content/uploads/2011/09/pause-in-times-of-conflict.png" width="60px" height="60px" style="display:none"/> </div> 

Answer 2

Pure HTML / CSS

http://jsbin.com/jQuery_Toggle/5/edit

 <label class="tog"> <input type="checkbox"> <span></span> </label> 

 label.tog > input{ display:none; /* hide the checkbox */ } label.tog > span{ display:inline-block; /* use also vertical-align:middle; if needed */ width:16px; height:16px; background: url("play.png"); } label.tog > input:checked + span{ background-image: url("pause.png"); } 

---

Toggle Internal Span Images

Useful reason for not loading a new request onto the server:

http://jsbin.com/jQuery_Toggle/4/edit

 <span class="tog"> <img src="play.png" /> <img style="display:none;" src="pause.png" /> </span> 

 $(".tog").click(function(){ $('img',this).toggle(); }); 

---

Or, say, we have this HTML and a .tog selector:

 <img class="tog" src="play.png"/> 

Using Array.prototype.reverse ()

http://jsbin.com/jQuery_Toggle/1/edit

 var togSrc = [ "play.png", "pause.png" ]; $(".tog").click(function() { this.src = togSrc.reverse()[0]; }); 

---

Using the current src value and String.prototype.match()

Useful if you do not know the initial state (play? Pause?)

http://jsbin.com/jQuery_Toggle/3/edit

 var togSrc = [ "play.png", "pause.png" ]; $(".tog").click(function() { this.src = togSrc[ this.src.match('play') ? 1 : 0 ]; }); 

_{NOTE. for the last two examples, you need to preload the images in order to prevent the time that browsers take to download a new image from the server.}

Answer 3

You can use the .toggle() function. I updated your fiddle. In addition, you did not escape the quotation marks correctly in your image tags.

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

Answer 4

 <div id="infoToggler"><img src="http://tympanus.net/PausePlay/images/play.png" width="60px" height="60px"/></div> $(document).ready(function(){ var src1 = "http://tympanus.net/PausePlay/images/play.png"; var src2 = "http://maraa.in/wp-content/uploads/2011/09/pause-in-times-of-conflict.png"; $("#infoToggler").click(function(){ var src = $('#infoToggler img').attr('src'); if(src == src1){$('#infoToggler img').attr('src',src2);} else{$('#infoToggler img').attr('src',src1);} }); 

})

It works, I checked.