Found this little gem in Stackoverflow.
$(function() { $("img") .mouseover(function() { var src = $(this).attr("src").match(/[^.]+/) + "over.gif"; $(this).attr("src", src); }) .mouseout(function() { var src = $(this).attr("src").replace("over", ""); $(this).attr("src", src); }); }); |
Thanks to Jarrod Dixon.
Here is another simpler version.
$(".icons_inner img").hover( function(){this.src = this.src.replace("_off","_on");}, function(){this.src = this.src.replace("_on","_off"); }); |
You just have to name you email images as “my_icon_on.png” and “my_icon_off.png”. I find this version a lot simpler to implement and debug. Source.
This code is OK, but I made something pretty similar but supporting fadeIn/fadeOut, + images are preloaded so they react right in time.
http://www.unimat.ca/js/rollovers.js
Thanks David! I just found a bug when I deployed my code. Will post a fix here later.