OnMouseOver in a TablePane

While the <TablePane> doesn't explicitly support the onMouseOver event, there are a few hooks you can exploit to inject whatever HTML5 content you desire.

One generic trick is to use the getEnclosingDiv() method (defined for all Zen components that map to HTML DOM elements).  This will get you a pointer into the DOM where you can use JavaScript to add event handlers, append or delete child nodes, and annotate DOM nodes with additional (temporary and/or hidden) information for bookkeeping purposes.  Just be aware that a server-side refresh will wipe out any such changes at run time so you need to either pay attention to when those are occurring, or be ready to edit the DOM again (with a onUpdateHandler() or onRefreshHandler()) should your changes get toasted.

In your case, however.  TablePane offers a more directed solution.  OnDrawCell() is a server-side callback that allows you to inject HTML into the page as the component is being generated on the server.  You can define a separate callback for each column and the system will invoke that callback once for every row in your result set, allowing every cell to have unique contents and behavior as desired.  (The "Using Zen Components" DocBook section on Zen Tables offers examples of how to use this callback and how to access the underlying query results from the handler).

It sounds like what you want to do is to inject a <DIV> element with a custom onmouseover and (maybe) onmouseout event listeners installed.  Give this DIV a width and height of 100% (so it fills the whole cell) and then append whatever visible content you want inside the cell.  This can all be achieved with simple WRITE statements or by using the &HTML<> syntax.

The callback to actually process the event can be any visible ClientMethod, usually accessed via the special JavaScript objects, zenThis or zenPage, and can be passed whatever information is needed to determine which image should be displayed and where on the page it should appear.

Hope this helped.