JQuery - changing src image when freezing

Question

Basically, I want to change the src image to add -active.png when it hangs.

So fb.png will become fb-active.png on hover and fb.png if it doesn't hang.

I'm not too sure what I'm doing wrong, so I will show my code: -

HTML

  <div id="main-contact" class="right"> <div id="main-social"> <a href="#!"><img class="img-social" alt="Company - Facebook" class="left" src="images/fb.png" /></a> <a href="#!"><img class="img-social" alt="Company - Twitter" class="left" src="images/twitter.png" /></a> <a href="#!"><img class="img-social" alt="Company - LinkedIn" class="left" src="images/linkedin.png" /></a> <a href="#!"><img class="img-social" alt="Company - Word Press" class="left" src="images/wordpress.png" /></a> </div> </div> 

JQuery

 $(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); }); }); }); 

Answer 1

This can be done without javascript, only css. Like this:

Give different classes for icons like fb for facebook, tw or twitter, etc.

HTML:

 <div id="main-social"> <a href="#!"><span class="img-social fb left" title="Company - Facebook"></span></a> <a href="#!"><span class="img-social tw left" title="Company - Twitter"></span></a> <a href="#!"><span class="img-social ln left" title="Company - LinkedIn"></span></a> <a href="#!"><span class="img-social wp left" title="Company - Word Press"></span></a> </div> 

CSS

 .img-social{display:inline-block;height:20px;width:20px;} .fb{background:url("images/fb.png");} .fb:hover{background:url("images/fb-active.png");} .tw{background:url("images/twitter.png");} .tw:hover{background:url("images/twitter-active.png");} .ln{background:url("images/linkedin.png");} .ln:hover{background:url("images/linkedin-active.png");} .wp{background:url("images/wordpress.png");} .wp:hover{background:url("images/wordpress-active.png");} 

You can use sprite for efficiency.

Answer 2

You can only do this in CSS unless you need to match older browsers.

To do this in jquery, you can try something like this:

 $(".img-social").hover(function(){ $(this).attr("src", function(index, attr){ return attr.replace(".png", "-active.png"); }); }, function(){ $(this).attr("src", function(index, attr){ return attr.replace("-active.png", ".png"); }); }); 

Answer 3

You can use mouseenter, mouseleave functions.

 <a href="#" class="hover-change-img"><img src="sample1.png" class="img-responsive"></a> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script> $("document").ready(function(){ $(".hover-change-img img").mouseenter(function(){ $(this).attr('src','sample2.png'); }); $(".hover-change-img img").mouseleave(function(){ $(this).attr('src','sample1.png'); }); }); </script> 

Answer 4

I use this script base .. on the script above ... it just switches between the active and the original image.

 $("document").ready(function(){ $(".my_image").mouseenter(function(){ $(this).attr('src',function(index, attr){ return attr.replace(".png", "-active.png"); }); }); $(".my_image").mouseleave(function(){ $(this).attr('src',function(index, attr){ return attr.replace("-active.png",".png");}); }); }); 

Answer 5

There are ways to do this. One of the simplest is having two states in one image, and then just changing the position of the background on hover. Thus, there is no unnecessary waiting for the loading of the guidance image since it already exists.

 <div id="main-social"> <a href="#!" alt="Company - Facebook" class="left fb">facebook</a> <a href="#!" alt="Company - Twitter" class="left tw">twitter</a> <a href="#!" alt="Company - LinkedIn" class="left li">linkedin</a> <a href="#!" alt="Company - Word Press" class="left wp">Wordpress</a> </div> 

CSS

 #main-social a { width: 50px; height: 50px; display: inline-block; text-indent:-1000px; overflow:hidden; background-position: left top; } #main-social a.fb { background-image: url('fb.png'); } #main-social a.tw { background-image: url('tw.png'); } #main-social a.li { background-image: url('li.png'); } #main-social a.wp { background-image: url('wp.png'); } #main-social a:hover, #main-social a.active { background-position: left bottom!important; } 

JSFiddle demo