(function($) { $.fn.rollover = function() { //preload images var preloaderContainer = $("<div>").css("visibility", "hidden").appendTo($(document.body)); this.find("img[rollover]").each(function(index) { var preloaderImg = $("<img>").attr("src", $(this).attr("src")); preloaderContainer.append(preloaderImg); }).mouseover(function(evt) { //mouse over $(this).attr("originalSrc", $(this).attr("src")); $(this).attr("src", $(this).attr("rollover")); //mouse out $(this).mouseout(function() { $(this).unbind("mouseout"); $(this).attr("src", $(this).attr("originalSrc")); }); }); }; })(jQuery); $(function() { $("#tiles").rollover(); });
<div id="tiles"> <img rollover="http://harouny.files.wordpress.com/2012/06/6822663635_0c7b63d93b_s .jpg?w=75" class="tileImg" width="150" src="http://harouny.files.wordpress.com/2012/06/6695416525_301f85d7c5_s.jpg?w=75" /> <img rollover="http://harouny.files.wordpress.com/2012/06/6701144739_15f9663b9e_s.jpg?w=75" class="tileImg" width="150" src="http://harouny.files.wordpress.com/2012/06/6846565247_5371b6bcd5_s.jpg?w=75" /> </div>