Hidden Graphics - CSS Style

Neil,

This is a method I literally just came up with (3/28/07) and so I added a link to my Tidbits page as a result! Hover below this text. Be careful, though. I've noticed some different browsers doing things differently. After the image appears, IE requires that you click off the image once before alternating between hovering on and off the picture makes it consistently appear and disappear (swap).

-Jamie

This is much simpler than the JavaScript method, but it is less versatile. In IE-based browsers, I can technically go from non-graphic to graphic in the swapping. Gecko-based browsers (Firefox, etc.) aren't so forgiving. The main advantage of this method is that swapping will still work EVEN with JavaScript disabled. The main disadvantages are the following: less control, less ability to do more dynamic things combined with swapping, and image dimensions must be set for it to work properly (while I go from a 2px by 2px image to a 500px by 400px image with JavaScript) often making the discovery of the hidden image easier when hovering.

Enjoy!

Jamie

To figure it out, view the source. I've put in plenty of comments.