Changing the Mouse Pointer

When this page loads, the mouse pointer should change to a 'hand'. A custom cursor is defined by the "cursor:" style property CSS (cascading style sheets). The easiest way to change the cursor type is to add a style="cursor: crosshair" property within an HTML tag. e.g.

<p align="center" style="cursor: crosshair">Text</p>

The following links should change the pointer after being 'moused-over'. These show a number of built-in cursor styles that you can use:

auto

crosshair

default

pointer

help

move

text

wait


nw-resize

n-resize

ne-resize

w-resize

hand

e-resize

sw-resize

s-resize

se-resize

Some of the cursor styles may not work, depending on the browser.

Custom Mouse Pointers

The following HTML code will display a custom cursor:

<p align="center" style="cursor: url('cursor.cur')">Text</p>

A custom URI

The user agent (i.e. browser) must be able to handle the type of cursor. Some possible file types that may work are .cur, .csr and .ani files. The above example works in Internet Explorer for Windows, but not in Netscape or IE 5.0 for Unix.

More web development articles