IMPROVED jQuery Image Preloader with Rollover Effect (dynamic extensions supported)
This post expands on my original jQuery Preload and Swap Navigation Images post. The original code required you to enter the file extension (eg: jpg, png, gif). The modifications below make this jQuery hover/rollover/swap code totally dynamic 
$(document).ready(function() {
//preload images
var preloadedImages = new Array();
$('#container img').each(function(i) {
preloadedImages[i] = new Image();
var ext = $(this).attr('src').split('.').pop();
preloadedImages[i].src = $(this).attr('src').split('.' + ext).join('-hover.' + ext);
});
//rollover effect
$('#container a').hover(function() {
var ext = $(this).find('img').attr('src').split('.').pop();
$(this).find('img').attr('src', $(this).find('img').attr('src').split('.' + ext).join('-hover.' + ext));
}, function() {
var ext = $(this).find('img').attr('src').split('.').pop();
$(this).find('img').attr('src', $(this).find('img').attr('src').split('-hover.' + ext).join('.' + ext));
});
});
The only significant change from my original code to grab the file extension (var ext = value) before preloading or swapping the images… Read more