Hi Swati,

You have to set a global boolean variable Flag before changing your image source. Like this:

$(document).ready(function(){
    var flag = true;
    $('.imgContainer').mouseenter(function(){
        if (flag) {
             $('.imgContainer').attr('src','img1.gif');
         }
     }),
    $('.imgContainer').mouseleave(function(){
        if (flag) {
              $('.imgContainer').attr('src','img2.gif');
        }
    }),
    $('.imgContainer').click(function(){
       flag = false;
     }); });

We can use the following lines to make the mouseenter and mouseleave inactive on click :

$('.imgContainer').click(function(){
     $(this).off('mouseenter').off('mouseleave');
});

This will help you get over your problem. Hope this will help you. Thanks

On the click function call unbind the mouseleave event from the imgcontainer as in :

$('.imgContainer').click(function(){        
        $('.imgContainer').css('opacity','1');
        $('.imgContainer').unbind( 'mouseleave' );
        });