AddThis is a useful social sharing service allowing you to create groups of social sharing buttons in one place that you can then embed onto your website/blog etc.
You can either use their standard buttons or they kindly allow you to use your own images instead – see their help document here:
http://support.addthis.com/customer/portal/articles/381236-custom-buttons
However, what if you want to swap the image as you hover over the button?
I thought I’d share the extra bit of Jquery I have used to sucessfully switch the image on hover.
I had created a series of button images called things like “share_add_off.gif” & “share_add_on.gif”
The following code goes in the document.ready and detects if the link is being hovered over, and if so, it swaps the hovered image for the one named “_on” – and importantly swaps it back when the user mouses out.
var oldImgSrc;
var newImgSrc;
var thisImg;
$(document).ready(function(e) {
$('.addthis_toolbox > a').hover(function(e){
thisImg = $(this).find('img');
oldImgSrc = thisImg.attr("src");
newImgSrc = oldImgSrc.replace("_off","_on");
thisImg.attr("src",newImgSrc);
},function(){
thisImg.attr("src",oldImgSrc);
});
});
See it in action here:
http://lrd-thebigidea.com/work/creaseys
Hi Laura, I’m the community manager at AddThis. I came across your post, and I love how you customized our sharing icons! They look great! I’m always looking for cool stories to highlight on our blog, so if you’re interested, send me an email. 🙂
Thank you.