[jQuery] Simple plugin to rollove an image
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