JavaScript rollovers have been around almost as long as JavaScript itself (and they’re still useful, in many ways). However, I’ve recently discovered some CSS-based rollovers with a built-in preloader (via Zeldman.com).
The idea is that the documentation is in the source code, and that the reader figures things out from there. Really, the technique is not too hard to understand, once you see what he’s doing. Basically, each <img> is surrounded with an <a href=“…”> (just like normal). However, each link’s background-image is set to the desired rollover state.
Of course, with the image completely covering the background, the rollover state isn’t seen. But, the author then specified visibility:hidden for the hover-state of the images. So: the user rolls over an image, the image becomes hidden, and the background (the rollover state) is seen.
And, because the rollover-images aren’t hidden elements (but merely covered up), they’re loaded with the rest of the page — and so there’s no lag when they’re swapped-in (or, rather, unveiled). An elegant approach, I think.