Home | Index | About | Contact
e-lections Know How motto Know Why motto Share motto Apply motto
Science funnel
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

How to change a mouse cursor shape on a webpage and on a computer screen

Leonid Batkhan | January 2010

http://www.e-lections.us/mouse-cursor-shape-2010-01-31.html


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 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 [http://www.w3.org/TR/CSS2/ui.html#propdef-cursor]. 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_property_value Example of style declaration
  auto The User Agent determines the cursor to display
based on the current context.
default
style="cursor: default;"
pointer + hand
style="cursor: pointer; cursor: hand;"
crosshair
style="cursor: crosshair;"
text
style="cursor: text;"
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 [www.rw-designer.com/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

  1. Go to Start->Settings->Control Panel

  2. Double click the Mouse icon

  3. Click on the "Pointers" tab and then on "Browse..." button:

  4. Now you can select a cursor from a list of the Widows-supplied .cur files:

  5. Even better, you can download additional .cur and/or .ani files 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.

  6. You can also create your own cursors using various Graphics software. For example, you can try this free and user-friendly software JustCursors 1 [http://download.cnet.com/JustCursors/3000-2317_4-10406298.html] which allows creating both .cur and .ani image files.

 
Terms of Use | Submit an Article | Contact