Handling Client-side Events

Adding client script to ASP.NET Web pages

ImageMap mode supports a limited subset of client-side events, such as NodeClickedScript, NodeDoubleClickedScript, NodeMouseEnterScript, NodeMouseLeaveScript, and their link-related counterparts. The following sample shows how to handle the mouse-enter and mouse-leave client side events.

1. Open the Default.aspx file, switch to Design view, and click the NetDiagram control.

In the Properties window, find the DiagramView NodeMouseEnterScript property. It should contain the name of a JavaScript function that must be invoked when the mouse pointer enters the node.

In the field on the right of the NodeMouseEnterScript property, type in the name of the JavaScript function, in this case "onMouseEnter".

2. In the Properties window, in the NodeMouseLeaveScript property, type in "onMouseLeave", the name of the function that should be called when the mouse leaves the node.
3. Add the JavaScript functions for handling the events.

In the Default.aspx file, switch to Source view.  

Put the JavaScript functions in the HTML page.

JavaScript

<script language="javascript" type="text/javascript">
function onMouseEnter(sender, args)
{
    var span = document.getElementById("infoSpan");
    span.innerText = args.getNode().getZIndex() + args.getNode().getTag();
}function onMouseLeave(sender, args)
{
    var span = document.getElementById("infoSpan");
    span.innerText = "";
}
</script>

4. Execute the Website application.

The diagram is drawn when loading the page. When pointing a node, the respective ZIndex of the node is shown.