1: (function($) {

   2:     $.fn.extend({

   3:         hoverImage: function(options) {

   4:             var defaults = { src: "-hover", preload: true, replaceEnd: "" };

   5:             options = $.extend(defaults, options);

   6:  

   7:             var append = options.src.indexOf(".") == -1;

   8:  

   9:             var splitter;

  10:             if (append) {

  11:                 splitter = options.replaceEnd + ".";

  12:             }

  13:  

  14:             return this.each(function() {

  15:                 var obj = $(this);

  16:                 var img = obj.is("[src]") ? obj : obj.children("[src]:first").eq(0);

  17:  

  18:                 if (!img.is("[src]")) {

  19:                     return true;

  20:                 }

  21:  

  22:                 var oSrc = img.attr("src");

  23:                 img.data("oSrc", oSrc);

  24:  

  25:                 var hSrc = options.src;

  26:                 if (append) {

  27:                     hSrc = oSrc.split(splitter).join(hSrc + ".");

  28:                 }

  29:                 

  30:                 img.data("hSrc", hSrc);

  31:  

  32:                 if (options.preload) {

  33:                     new Image().src = hSrc;

  34:                 }

  35:  

  36:                 obj.hover(function() { img.attr("src", img.data("hSrc")); },

  37:                           function() { img.attr("src", img.data("oSrc")); });

  38:             });

  39:         }

  40:     });

  41: })(jQuery);

Here’s a sample of html in which the plug-in is used.

   1: <html xmlns="http://www.w3.org/1999/xhtml">

   2: <head runat="server">

   3:     <title>hoverImage test page</title>

   4:     <script src="/ClientScript/jquery-1.3.2.min.js" type="text/javascript"></script>

   1:  




   2:     <script src="/ClientScript/jquery.hoverImage.js" type="text/javascript">




   1: </script>




   2:  




   3:     <script type="text/javascript">




   4:         $(function() {




   5:             $(".standardImage").hoverImage({replaceEnd: "-standard"});




   6:             $(".hoverImage").hoverImage();




   7:         });




   8:     


</script>

   5: </head>

   6: <body>

   7:     <form id="form1" runat="server">

   8:     <div>

   9:         <img class="standardImage" src="Imgs/button-standard.gif" />

  10:         <img class="hoverImage" src="Imgs/button.gif" />

  11:         <a class="hoverImage" href="#" style="display:block; width:100%;border:solid 1px black;">

  12:             <img src="Imgs/button.gif" />

  13:         </a>

  14:     </div>

  15:     </form>

  16: </body>

  17: </html>

Happy 2010~~