Egg, I tidied up your JavaScript to accommodate any number of images.
I couldn't really do much for the transition as it gets quite messy. I have a bodge in place.
I changed the masks to a local file so I could experiment with it. Massages shows you don't even need an image.
The use of onmouseover without onmouseout is very useful as a latch.
I might try for a CSS solution...
image-swap-js-2 - Acorn.xar
Acorn
Bookmarks