Pre-loaded Image Rollovers with jQuery
January 28, 2019
In your HTML source:
<img src="/images/button.gif" hover="/images/button_on.gif" />
<img src="/images/another_button.gif" hover="/images/another_button_on.gif" />
jQuery(document).ready(function(){
jQuery('img[hover]').each(function(){
// Preload rollover
var imageEl = jQuery("<img alt="" />");
imageEl.attr('src',jQuery(this).attr('hover'));
jQuery(this).hover(
function(){
// swap the image.
var hoverSrc = jQuery(this).attr('hover');
var regSrc = jQuery(this).attr('src');
jQuery(this).attr('src',hoverSrc);
jQuery(this).attr('hover',regSrc);
}
);
});
});
Thanks jQuery for being so awesome.