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

});

why you have added two classes in your html code? use only one css, if you want to add two or more you can add as class="img-social left" — Krish R
– Krish R, Commented Nov 3, 2013 at 12:41

Simon · Accepted Answer · 2013-11-03 12:46:56Z

22

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

answered Nov 3, 2013 at 12:46

Simon

3,7582 gold badges25 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Moob Over a year ago

Which older browsers can't do :hover?

Simon Over a year ago

IE up to 6 only supports hover on elements with a 'href' attribute: reference.sitepoint.com/css/pseudoclass-hover

Moob Over a year ago

Noted. But the OP is using a href and besides IE6 is 13 years old!

Simon Over a year ago

In the question, the hover style must not be applied to the <a> tag, but to the <img> one, so it is not using an element with 'href' attribute. Concerning the age of IE6, I know, but still I see some clients askings for compatibility with it :/

Moob Over a year ago

Fair point. I didn't interpret the OP's question quite that way - I assumed the need to change the img src on-hover was on hover of the link that wrapped it but you are quite right that the OP's request was for on hover of the img (although the OP did not state that the behaviour 'must not' be applied to the a as you suggest). Ultimately, I stand corrected and thank you for your feedback.

codingrose · Accepted Answer · 2014-09-11 12:09:06Z

6

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.

edited Sep 11, 2014 at 12:09

answered Nov 3, 2013 at 12:40

codingrose

15.7k11 gold badges41 silver badges58 bronze badges

3 Comments

nsilva Over a year ago

I was going to use the -active for many other hover states, would it still be best practice to do it this way still?

nsilva Over a year ago

don't worry, sometimes I forget the simple things and end up using jQuery too much and when not needed

pulsar Over a year ago

-1 as question title and example specifies jQuery to be used.

Gnanasekar S · Accepted Answer · 2016-09-21 16:05:27Z

6

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>

edited Sep 21, 2016 at 16:05

answered Sep 21, 2016 at 15:58

Gnanasekar S

1,89018 silver badges16 bronze badges

Comments

microsam · Accepted Answer · 2017-12-13 02:32:26Z

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

answered Dec 13, 2017 at 2:32

microsam

212 bronze badges

1 Comment

Mathews Sunny Over a year ago

Add some description it would be more helpful than just piece of code.

Bruno Sacco · Accepted Answer · 2020-06-23 19:08:18Z

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>

Moob · Accepted Answer · 2013-11-03 12:58:31Z

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

Collectives™ on Stack Overflow

jQuery - Change image src on hover

6 Answers 6

5 Comments

3 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

5 Comments

3 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related