I have a situation where I've got a menu and a small picture area at the top of the menu. In the old design I've got a standard javascript that changes the mouse button and the small picture when the mouse rolls over the button. I'd like to see if I can get rid of all the javascript, though, and just use CSS for the rollovers.

 

I know roughly how to do the CSS rollovers, so the buttons themselves will change. But I can't quite figure out a way to get the picture to change in the small picture area above the menu.

 

Any suggestions would be appreciated. It's not a huge problem if I have to continue to use the javascript rollover method, I'm basically just wondering if it's possible to get rid of it entirely. This is more of an experiment/education thing than a customer requirement.

Yup; take a look at: http://meyerweb.com/eric/css/edge/popups/demo2.html for an example.

Ooo that's a nice writeup. Thanks Dave!