IdleCursor Property

get_idleCursor();
set_idleCursor(value);
Object.defineProperty('idleCursor');

Property Value

IdleCursor and WorkingCursor are only used when this ImageViewerInteractiveMode is attached to the left mouse button. It will not be used if this mode is attached to any other button or to touch. Mouse cursors are only supported by desktop browsers.

The values are standard HTML cursor strings. You can use a value like "crosshair" or "move". They will be set into the CSS style.cursor property of the HTML element. A value of null, means "do not change the cursor".

The cursors are set into the ImageViewer main div (ImageViewer.DivId) and foreground canvas (ImageViewer.CanvasId) elements when this interactive mode is assigned to the left mouse button. Also, the cursors will be set in any elements added by the user to the InteractiveService.UserElements collection.

IdleCursor will be set when the the interactive mode is started (after Start is called) and removed when the mode is stopped (when Stop is called).

WorkingCursor will be set when the interactive mode is working (When OnWorkStarted is called) and removed (or set back to idle) when the interactive mode has stopped working (When OnWorkCompleted) is called).

These cursors can be used to provide a visual clue into the current interactive mode operations. For instance, when using the ImageViewerPanZoomInteractiveMode interactive mode, you can set IdleCursor to "crosshair" and WorkingCursor to "move".

Start with the ImageViewer example, remove all the code inside the example function (search for the "// TODO: add example code here" comment) and insert the following code:

Open the HTML page in your browser and click the example button. Now when hovering over the viewer, the cursor changes to a "crosshair". When you click and drag, the cursor changes to "move".

example: function SiteLibrary_DefaultPage$example(viewer) {
   // Get the default interactive mode (setup in the other part of this demo to
   // ImageViewerPanZoomInteractiveMode
   var interactiveMode = viewer.get_defaultInteractiveMode();
   // Set its cursors
   interactiveMode.set_idleCursor("crosshair");
   interactiveMode.set_workingCursor("move");
   // Stop and start the move for the cursors to take effect
   interactiveMode.stop(viewer);
   interactiveMode.start(viewer);

   var exampleLabel = document.getElementById("exampleLabel");
   exampleLabel.textContent = "cursor will be crosshair when you hover over the viewer (idle) and move when you click and drag (working)";
},