O'Reilly logo

MooTools 1.3 Cookbook by Jay Larry G. Johnston

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required