Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery - Change image src on hover

Tags:

jquery

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

});
like image 892
nsilva Avatar asked Nov 03 '13 12:11

nsilva


People also ask

How to change image on mouseover using jQuery?

Just apply a class to your image tag and target it in your jQuery, on . hover of the div specified on line 2 the src attribute of your img will be changed to the new one, if you want to switch it back to your old img when your mouse leaves the div just add this code below the last function().

How can I change the image on hovering?

This task can be simply done by using the CSS background-image property in combination with the :hover pseudo-class to replace or change the image on mouseover. Example: HTML.

How to change src attribute of image in jQuery?

Answer: Use the jQuery attr() Method You can use the attr() method to change the image source (i.e. the src attribute of the <img> tag) in jQuery. The following example will change the image src when you clicks on the image.


2 Answers

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");
    });
});
like image 138
Simon Avatar answered Oct 06 '22 20:10

Simon


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.

like image 30
codingrose Avatar answered Oct 06 '22 19:10

codingrose