Using Custom images for AddThis buttons

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