I'm looking for a script that will toggle between 2 images on the onMouseOver and onMouseOut events of ASP LinkButtons. From what I can tell, the LinkButton works similar to an HTML <a> tag.

Some requirements:

I do not have any control of the images or their filenames. There are literally millions of images and so I can't use a script that expects there to be an 'on' or a 'off' in the image filename.

My pages are transformed using XSLT, so it isn't a problem to insert the actual filenames in the markup. I can do that with no problem. Specifying the filenames in the script block might be trickier, but I can probably pull that off too.

A little transition would be nice - a simple fade in and fade out.

It's not always guaranteed the images will be the same size, so I'm hoping there is a way to remove all trace of the MouseOver image on MouseOut. Some examples I've tried seem to only remove themselves and if they were larger than the original image I get traces of the MouseOver image left. Maybe this is a CSS issue. My <div> tags create an area the same size and width consistently, but the images don't always completely fill the div area.

Just thought some of you might have an idea for a solution.