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);
});
});
});
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().
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.
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.
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");
});
});
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With