Changing graphics upon MOUSEOVER

Many corporate websites make use of this content-changing mechanism to bring a new level of professionalism to their front pages.

Getting ready

Launching off our previous recipe, we add a new level of interaction. Prepare both the mouseover and mouseout Element.addEvents() code blocks, as well as three images to use for the new DOM element that will be updated when our button listeners are fired. This screenshot shows how the lady figurine appears when the Witch button is moused over:

Getting ready

How to do it...

The mouseover action is adjusted with a new line of code that uses the button/image naming structure to update the background ...

Get MooTools 1.3 Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.