title: jQuery - Change image src on hover
body: <p>Basically I want to change the image src to add <code>-active.png</code> on hover.</p>
  
  <p>So fb.png would become fb-active.png on hover, and fb.png when it's not hovering.</p>
  
  <p>I'm not too sure what I am doing wrong so I'll post my code so far:-</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>        &lt;div id="main-contact" class="right"&gt;
  
              &lt;div id="main-social"&gt;
  
                  &lt;a href="#!"&gt;&lt;img class="img-social" alt="Company - Facebook" class="left" src="images/fb.png" /&gt;&lt;/a&gt;
  
                  &lt;a href="#!"&gt;&lt;img class="img-social" alt="Company - Twitter" class="left" src="images/twitter.png" /&gt;&lt;/a&gt;
  
                  &lt;a href="#!"&gt;&lt;img class="img-social" alt="Company - LinkedIn" class="left" src="images/linkedin.png" /&gt;&lt;/a&gt;
  
                  &lt;a href="#!"&gt;&lt;img class="img-social" alt="Company - Word Press" class="left" src="images/wordpress.png" /&gt;&lt;/a&gt;               
  
              &lt;/div&gt;
  
          &lt;/div&gt;
  </code></pre>
  
  <p><strong>jQUERY</strong></p>
  
  <pre><code>$(document).ready(function() {
  
  $(function(){
      var regexactive = /-active\..*$/;
  
      var ct = $('#main-social');
      var imgs = $('.img-social img', ct);
  
      function activateImage(imgs){
          imgs.each(function(){
              var img = $(this);
              var src = img.attr('src');
              if( !regexactive.test(src) ){
                  img.attr('src', src.replace('.png', '-active.png'))
              }
          });
      }
  
      ct.on('hover', '.img-social', function(){
  
  
          var img = $('.img-social img');
          activateImage(img);
      });
  });
  
  });
  </code></pre>