Simple Use Case: YAHOO.plugin.Lighter

Markup (lighter container element):
<div class="hotarea1 yui-cms-selector">
  <div class="yui-cms-item">
      Hot item #1
  </div>
  <div class="yui-cms-item">
      Hot item #2
  </div>
</div>

Script:
YAHOO.plugin.Lighter.add( 'hotarea1' );
The Ligther Manager explore the areas with className "hotarea1" and highlight the items with className "yui-cms-item" on mouseover event.

Singleton: YAHOO.plugin.Lighter

YAHOO.plugin.Lighter.add(str className, obj config);

Arguments:
(1) className: className of the area (don't matter if the markup exist or no, the lighter is based on the "event-driven technique" to monitoring the hot areas).
(2) Configuration Object: JS object defining configuration properties for the area. See Configuration section for full list.

Solutions:

YAHOO.plugin.Lighter.add( "myhotareas", {
    persistent: false,
    onSelect: function ( element, area ) {
        alert ( 'Highlighting the element inside the area...');
    },
    onReset: function ( area ) {
        alert ( 'Removing the highlighting from all the elements inside this area.' );
    }
});

Leave the selected area highlighted:

Use the attribute "persistent" in the configuration to leave the last selected area highlighted when the mouse go out of this area.

Use the CSS rules to customize your lighter expirience:

#leftcolumn div.myhotarea.yui-cms-selector div.yui-cms-item {
  border: 1px solid #eeeeee;
  background-color: #ffffff;
  margin: 5px;
  padding: 5px;
}
#leftcolumn div.myhotarea.yui-cms-selector div.yui-cms-item.selected {
  border: 1px solid #333333;
  background-color: #cccccc;
}

The lighter add a new className "selected" to the item (yui-cms-item) when the mouse is over the element.

Key Interesting Moments in Lighter

Key Lighter Configuration Options

Lighter DOM Structure

Facts

- Use the same className for several areas inside the document
- Use the onSelect and onReset events to create your our functionalities
- Use the CSS rules to create different behaviors for the same className