:: Documentation >> Tutorial >> Grid >>

Mouseover effects.

Mouseover effects require special handling to be fast enough. There are two global functions available just for this purpose (see /lib/system/html.js):

function mouseover(element, name){...}
function mouseout(element, name){...}

The first one adds a CSS class selector 'name' to the HTML element, the second removes it.

To create mouseover effect you need first to define a CSS class:

<style>
  .active-row-highlight {background-color: threedshadow}
  .active-row-highlight .active-row-cell {background-color: threedshadow}
</style>

and add the following script

var row = new Active.Templates.Row;
row.setEvent("onmouseover", "mouseover(this, 'active-row-highlight')");
row.setEvent("onmouseout", "mouseout(this, 'active-row-highlight')");
obj.setTemplate("row", row);

This is slightly different from normal syntax - where you supply a function as an event handler. Here instead of a function you provide a string which is simply assigned to HTML element "onmouseover" property and is evaluated on mouseover event.

Here is the complete script: