jQuery - Change image src on hover

Question

Basically I want to change the image src to add -active.png on hover.

So fb.png would become fb-active.png on hover, and fb.png when it's not hovering.

I'm not too sure what I am doing wrong so I'll post my code so far:-

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

You can add an extra attribute to your image, like "alt_img" and then just wait for the hover event and switch the attributes. Its a very simple approach.

<script type="text/javascript">
    var src = "";
    var alt = "";
    $("document").ready(function(){ 
        $(".img-fluid").mouseenter(function(){       
            var src = $(this).attr('src');
            var alt = $(this).attr('alt_img');
            $(this).attr('src',alt);      
            $(this).attr('alt_img',src);      
        });     

        $(".img-fluid").mouseleave(function(){       
            var src = $(this).attr('src');
            var alt = $(this).attr('alt_img');
            $(this).attr('src',alt);      
            $(this).attr('alt_img',src);     
        }); 
    });
</script>

Answer 2

I use this script.. base on the script above... it just switch between the active and 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 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

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

Give different classes for icons like fb for facebook,tw or twitter and so on.

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 5

There's load of ways of doing this. One of the simplest is to have the two states in the same image and then just changing the background position on hover. This way there's no extra wait for the hover image to load as its already there.

<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;
}

Demo JSFiddle

Answer 6

You could do this just in CSS if you don't need to be compliant with older browsers.

To do it 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");
    });
});