Here is my image rollovers jQuery plugin. The only requirements are
that you have your jQuery expressions search for a dom elements that
contain img tags, and that those images have file names that follow a
certain convention. I have it written such that it only applies the
mouseover and mouseout stuff to images with a src attrib that contains
"_off.", which usually means an image tag that at minimum looks like
this.
<img src="images/aboutus_off.gif" />
So if you had some images in an unordered list, put a class of
"rollover" in the <ul> and have image tags that look like the above
inside of the <li> tags. Your jQuery call would look like this:
jQuery(function(){
jQuery('ul.rollover').rollovers();
});
It also works for <input type="image" /> as long as it also has the
same src pattern. You can easily set the img src pattern in the code
below, just change filter('[EMAIL PROTECTED]"_off."]') to any other unique
pattern in your image naming convention.
/**
* $().rollovers();
* @author Paul McLanahan <pmclanahan at gmail>
*/
jQuery.fn.rollovers = function(){
return this.each(function(){
jQuery('img,[EMAIL PROTECTED]"image"]',this).filter('[EMAIL
PROTECTED]"_off."]').each(function(){
el = this;
// using Image objects for both so IE will preload
correctly.
el.overObj = new Image();
el.outObj = new Image();
el.outObj.src = el.src;
el.overObj.src =
el.src.replace(/_off\.([a-z]{3,4})$/i,"_on.$1");
})
.hover(
function(e){ // mouseover
this.src = this.overObj.src;
},
function(e){ // mouseout
this.src = this.outObj.src;
}
);
});
};
Feel free to use it if you want. It's not polished enough for release
yet in my opinion, but you're welcome to it.
Paul
On 11/14/06, Andy Matthews <[EMAIL PROTECTED]> wrote:
> I've got mouseover code I've been using for several years now. It works
> really well and is pretty streamlined, although it requires I instantiate
> each image (used for preloading). You can see it below. I'm wondering if
> anyone has a plugin which duplicates this functionality.
>
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
