Question

I currently have an image that changes when you click it but when I click on another image I would like it to return back to its default image state.

the code I have so far is below.

$('a img.lrg').click(function(){
  var newSrc = $(this).attr("src").replace("largefont.gif", "largefonton.gif");
  $(this).attr("src", newSrc); 
});

How can I change this to do the desired effect?

Thanks,

Sat

Answer 1

Use data() to hold the old src

$('a img.lrg').click(function(){
  $('a img.lrg').each(function(index, item){
     if($(item).data('old-src') != undefined){
          $(item).attr('src', $(item).data('old-src')); // bring back old image
     }
  })
  var old_src = $(this).attr("src");
  $(this).data('old-src', old_src);
  var newSrc = $(this).attr("src").replace("largefont.gif", "largefonton.gif");
  $(this).attr("src", newSrc); 
});

Fiddle: http://jsfiddle.net/maniator/94CqN/