IdleCursor Property

JavaScript
WinRT JavaScript

  get_idleCursor();
 set_idleCursor(value);

!MISSING Scrap '_RTJavaScript_PROPERTY_SYNTAX'!

Property Value

Type	Description
string	The mouse cursor to use for the idle state of this ImageViewerInteractiveMode. The default value is null.

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 hover over the viewer, the cursor changes to a "crosshair", when you click and drag, the cursor changes to "move".

JavaScript

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)";
},

IdleCursor Property

Property Value

Reference