jquery change or toggle images when clicked -

i'm trying 'when image1 clicked, show image2, when image2 clicked, show image3, when image3 clicked, show image1...' thing.

it works 2 images - image1 goes 2 , image2 goes 1 , on, when 3rd image introduced gets messed up. code is:

 <img id ="rotate_images" src="img1_on.png"/>  <script>  $('#rotate_images').on({     'click': function() {          var src = ($(this).attr('src') === 'img1_on.png')             ? 'img2_on.png'             : 'img1_on.png';          $(this).attr('src', src);          var src = ($(this).attr('src') === 'img2_on.png')             ? 'img3_on.png'             : 'img2_on.png';          $(this).attr('src', src);       }  }); 

i sort of know why it's happening - image1 goes image3, because skips first block of code, , image3 goes image2, same reason but...is there add in fix it? help.

chris.

fixed code:

<img id ="rotate_images" src="img1_on.png"/>  <script> $('#rotate_images').on({     'click': function () {         var origsrc = $(this).attr('src');         var src = '';         if (origsrc == 'img1_on.png') src = 'img2_on.png';         if (origsrc == 'img2_on.png') src = 'img3_on.png';         if (origsrc == 'img3_on.png') src = 'img1_on.png';         $(this).attr('src', src);     } }); </script>