:: Documentation >>

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 have to define a CSS class:

    .active-row-highlight {background-color: yellow}
    .active-row-highlight .active-row-cell {background-color: yellow}

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.

See also

Mouseover effects for a single cell


bugs using the above code Siddharth (2)
use mouseover Marc Bezeredi (1)
Mouseover highlighting first column Brian. (4)
rowIndex with onmouseover Rafael Vieira (1)
Firefox problem with onmouseover effects Ricardo Guerra (2)
Mouseover effects AND images Brian Jahng (1)
row color on click Rich (3)
Mouseclick (3)
Mouse over Row Highlight bug or requested fix Paul (4)
Mouseover and empty cells Luca (1)
alternate row color w/onmouseover,onmouseout (4)
Onmouse Effect in VBscript and recordset WzBn (2)
Grid ROW-color rollover vs. selected Ernst (2)
onmouseover and selection and images (0)
Using Active.Templates.Image with onmouseover (1)
known error? heeko (0)
How do I add mouse over affect in php? And how do I add a link to the rows? Gershon NY (0)
Frozen column and mouseover/out Henry Ng (1)
Possible future bug sufcrusher (3)
Strange behavior when some cell is empty? Sudhaker Raj (8)


Recent changes:

2.5.0 - 2.5.6
2.5.0 - 2.5.5