Unobtrusive Rollovers Using YUI

By YUI TeamApril 29, 2008

Introduction to Unobtrusive JavaScript, DOM Scripting, and the Yahoo! User Interface (YUI) Library on

Chad at wrote up a nice tutorial last week outlining some practical fundamentals with respect to writing "unobtrusive JavaScript." His example implements a standard rollover, beginning with bad-old-days obtrusive scripting, migrating to unobtrusive scripting, and concluding with an unobtrusive script that leverages YUI's Event Utility for event attachment and the Dom Collection's getElementsByClassName, addClass and removeClass for class management.

Click through for his functioning example.

Click through for the functioning example.

Of course, Chad just means this as an example of some of the practical points involved in unobtrusive scripting. Others have looked at the problem more encyclopedically — for a more ambitious (and not YUI-related) analysis of the paradigm, check out Christian Heilmann's "The seven rules of Unobtrusive JavaScript".