Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

 1 Answer(s)

  • HTML:
    <div>
           <img class="parent " src="image.jpg"" data-pos = '0' />
           <div>
             <img class="img" style="display:none" src="image1.jpg"" />
             <img class="img" style="display:none" src="image2.jpg"" />
             <img class="img" style="display:none" src="image3.jpg"" />
             <img class="img" style="display:none" src="image4.jpg"" />
             <img class="img" style="display:none" src="image5.jpg"" />
          </div>
    <div>

    jQuery:
     
    $(document).ready(function(){
      var pos = 0;
      $('.parent').bind('mouseover',function(){
        pos = $(this).data('pos');
        $(this).next('div').find('.img').eq(pos%5).show();
        $(this).hide();
        pos++;
        $(this).data('pos',pos);
      });
      $('.img').bind('mouseout',function(){
        $(this).hide();
        $('.parent').show();
    
      });
    });
    
    
    For more you can read this: https://stackoverflow.com/questions/20681369/change-image-src-from-multiple-image-list-using-jquery
Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: