I despise implementing image rollovers, but this makes it almost tolerable. Any <img> tag with a “hover” attribute referring to an image URL will have a rollover behavior attached to it. For bonus points, the rollover image will be pre-loaded, so there’s no momentary delay the first time an on-state image is loaded.
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.