[jQuery] Simple plugin to rollove an image

[howard chen]

As discussed previously in the group, I make a very simple plugin to
rollover an image..

Codes:


jQuery.fn.swapimage = function() {
  $(this).hover(function() {
      currentImage = $(this).attr('src');
      $(this).attr('src',$(this).attr('rel'))}, function(){
                $(this).attr('src',currentImage)
           });
        
           // preload image
           var preloadImage = new Image;
           preloadImage.src = $(this).attr('rel');
}


Usages:


$(document).ready(function() {
        jQuery(".rollOver").swapimage();
});


<img src="1.gif" rel="2.gif" class="rollOver" alt="" />


Advantages of using:
1. CSS can't preload image, the plugin can
2. Put rollover stuffs into CSS is no good: CSS for layout & design,
JS for effect
3. Very clean usage


howa