To have more than one just make sure you use unique image names.
This script works in IE4 & Netscape 3.01 Gold. Doesn't swap images in Netscape 2.02 but doesn't crash either. Haven't tested on anything else, but I think that it should be okay...
function swap(imgName, newSrc)
{
imgName.oldSrc = imgName.src;
imgName.src = newSrc;
}
Just means that in the mouseover and mouseout you just call the same function but change the image source argument.
<a href="http://whatever/')"
onMouseOver="if (canRun) swap(UNIQUEIMAGENAME,'images/button.gif')"
onMouseOut="if (canRun) swap(UNIQUEIMAGENAME,'images/loading.gif')">
<img name=UNIQUEIMAGENAME src="images/loading.gif" border="0"></a>
The dot to the
left of this text is the image which is being preloaded and displayed
as small as possible (1 pixel x 1 pixel) to try to hide it. If the page
background is black then it should hide completely. You don't have to cache
it but it will stop the browser from trying to load it only on the mouseover.
I am caching it this way as this is the easiest way to do it...