Double Rollovers

This web page uses the rollover technique to implement the effect of a double rollover: Move your mouse over and out one of the button-like images on the left of the page, and notice what happens: The image itself rolls to another image, but also a comment related to that image appears to the right. Remember that in an event handler we can catch more than one events, as we need. We are able to implement the effect of the double rollover by performing two actions in each event handler.

Your task in this exercise is to implement the double rollover effect. As always we recommend that you start out simple, and add to your page as you go. Start with only one button. Make this a simple rollover. Once you have this working, make it into a double rollover. After that you can easily add more buttons.

Test your page in the main browsers to see how it behaves.