How to change a mouse cursor shape on a webpage and on a computer screen
Perhaps you have noticed an unusual mouse cursor on this page. If not, try moving your mouse around.
A cursor is a static or animated image indicating the position on a computer monitor or other display device that responds to input from a keyboard or pointing device such as a mouse. The term "mouse cursor" is used interchangeably with "mouse pointer" or just "cursor". In many Graphic User Iinterfaces (GUI), the mouse cursor changes shape depending on the circumstances. For example:
Over text that the user can edit or select, the cursor changes to an
shape.Graphics-editing applications use cursor shapes such as brush, pencil or paint bucket indicating active function when the user edits an image.
At an edge or corner of a window the cursor usually changes into a double arrow (horizontal, vertical, or diagonal) indicating that the user can drag the edge/corner in the indicated direction in order to re-size the window.
While a computer process is in progress and cannot accept user input, a wait cursor,
or 
is displayed when the mouse points to the corresponding window.When the cursor hovers over a hyperlink, it changes into a hand
.
Changing a mouse cursor on a web page
To change a mouse cursor shape in a webpage, a cursor property of a style element can be used as specified in the Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. This can be done either within a CSS or as HTML inline style declaration.
The cursor property is supported by all major web browsers. However, not all the cursor values are supported by all browsers. You may move you mouse over the right column of the table below to see if and how your browser supports them.
Example 1 of using the cursor property defined in CSS:
a) In CSS define element, id or class selector:
.cursor_shape1 {cursor: cursor_property_value1}
.cursor_shape2 {cursor: cursor_property_value2}
b) In HTML, use it in <div>, <span>, <p>, or any other HTML element:
<div class="cursor_shape1"> ... </div> <div class="cursor_shape2"> ... </div>
Example 2 of using the cursor property in the HTML inline style declaration:
<div style="cursor: cursor_property_value"> ... </div>
You can apply the cursor property style to the <body> tag in order to change it for the whole page:
<body style="cursor: cursor_property_value">
The following table lists valid values of the cursor property (as of CSS2.1). It also illustrates how the mouse pointer (cursor) changes its shape (if your browser supports it) when you point your mouse over the rows in the right column:
| Cursor shape | Cursor Pproperty Value | Example of style declaration |
|---|---|---|
| auto | The User Agent determines the cursor to display based on the current context. | |
 |
default | style="cursor: default;" |
|
pointer | style="cursor: pointer;" |
 |
crosshair | style="cursor: crosshair;" |
|
text | style="cursor: text;" |
| or |
wait | style="cursor: wait;" |
 |
help | style="cursor: help;" |
 |
move | style="cursor: move;" |
 |
e-resize | style="cursor: e-resize;" |
 |
ne-resize | style="cursor: ne-resize;" |
 |
nw-resize | style="cursor: nw-resize;" |
 |
n-resize | style="cursor: n-resize;" |
 |
progress | style="cursor: progress;" |
 |
all-scroll | style="cursor: all-scroll;" |
 |
col-resize | style="cursor: col-resize;" |
 |
no-drop | style="cursor: no-drop;" |
 |
not-allowed | style="cursor: not-allowed;" |
 |
row-resize | style="cursor: row-resize;" |
 |
vertical-text | style="cursor: vertical-text;" |
 |
url( ) | style="cursor: url(mycursor.cur),auto;" |
For the url( ) cursor property, only .cur and .ani file types are supported as of IE6.
You can find an extensive library of free mouse cursors at the Open Cursor Library.
Both, static (.cur) and animated (.ani) cursor types are present in this library. For newer browsers, .gif and .png files are also supported.
Changing a mouse cursor on a computer desktop
Go to Start → Settings → Control Panel
Double click the Mouse icon
Click on the "Pointers" tab and then on "Browse..." button:
Now you can select a cursor from a list of the Widows-supplied
.curfiles:
Even better, you can download additional
.curand/or.anifiles and place them in the Cursors folder so you can select them in the previous step. To find the location of the Cursor folder, click on "Look in" drop-down box:
Here, it shows that the Cursor folder is located under the C:\WINNT folder.You can also create your own cursors using various Graphics software. For example, you can try this free and user-friendly software JustCursors which allows creating both
.curand.aniimage files.
Blog Home
Comments
Great!