$(document).ready(function(){
	$('.onoff img').each(function(ev){
			preload_img(this);
			$(this).mouseover(function(ev){
				img_on(ev.target);
			}).mouseout(function(ev){
				img_off(ev.target);
			});
	});
});

function img_on(tgt){
	var src=$(tgt).attr('src');
	var newsrc=src.replace("_off","_on");
	$(tgt).attr('src',newsrc);
}

function img_off(tgt){
	var src=$(tgt).attr('src');
	var newsrc=src.replace("_on","_off");
	$(tgt).attr('src',newsrc);
}

function preload_img(tgt){
	var src=$(tgt).attr('src');
	var newsrc=src.replace("_off","_on");
	$('<img>').attr('src', newsrc);
}

_off を　_on に置換してロールオーバー
_on 画像をプレロード

ロールオーバー+プレロード

jquery

jQuery