Changing the Mouse Cursor

document.getElementById("button").style.cursor =   "help"; 

Every operating system comes with a certain set of mouse cursors, and CSS supports a subset of them.

The appearance is a bit different between operating systems, but the general layout is quite similar.

The CSS command in question is cursor, and it is also available from JavaScript, as the following code shows:

Changing the Cursor (cursor.html)

<script language="JavaScript"   type="text/javascript"> window.onload = function() {   document.getElementById("helpButton").style.cursor = "help"; }; </script> <input type="submit"  value="Get help" /> 

You can see the result in Figure 4.5: The mouse cursor now includes a question mark to make it more obvious that there is help waiting behind the button.

Figure 4.5. The mouse cursor changes.

Warning

Every mouse cursor fulfills its purpose. So you should really think twice before changing the appearance of the mouse cursordo not irritate your users!

CSS Cursor Styles

These are the allowed values for the cursor JavaScript/CSS property:

• auto

• crosshair

• default

• e-resize

• help

• move

• n-resize

• ne-resize

• nw-resize

• pointer

• s-resize

• se-resize

• sw-resize

• test

• w-resize

• wait