Cursors and how to change them




What is the cursor?

The cursor is the small image that you move around on the screen, usually using a mouse or touch pad, when you want to point on something or click on a button or link. It is also called a pointer, but today pointer refer to a specific cursor, the one that looks like a hand with an extended index finger.


The various cursors

Most people have probably noticed the way the cursor changes between looking like a small arrow or a hand with an extended index finger or some other object, depending on what you are pointing at. This you can control on your website. For HTML you have a number of default cursors, depending on the object type, e.g. a hand for links created using the A tag.

You have two ways of specifying the cursor:
Choosing one or the other solution is a matter of personal taste. A minor detail though, is that with STYLE the backwards compatibility for Safari and Opera isn't all that great. For Safari it only works from ver. 5.0 and for Opera it works from ver. 9.6.


List of cursors

These are the standard cursors currently available for HTML. Several of them look alike, so it isn't all the created cursors it makes sense to use. Also, you should be aware that not all browsers (i.e. Internet Explorer) does not show exactly the same cursor for the same codes.


CursorDescriptionTest area. Place the cursor above the cell to see the effect.
aliasThe cursor indicates an alias of something is to be created.Test area.
all-scrollThe cursor indicates that something can be scrolled in any direction.Test area.
autoDefault. The browser sets a cursor.-
cellThe cursor indicates that a cell (or set of cells) may be selected.Test area.
context-menuThe cursor indicates that a context-menu is available.Test area.
col-resizeThe cursor indicates that the column can be resized horizontally.Test area.
copyThe cursor indicates something is to be copied.Test area.
crosshairThe cursor render as a cross-hairTest area.
defaultThe default cursorTest area.
e-resizeThe cursor indicates that an edge of a box is to be moved right or left.Test area.
ew-resizeIndicates a bidirectional resize cursor.Test area.
grabThe cursor indicates that something can be grabbed.Test area.
grabbingThe cursor indicates that something has been grabbed.Test area.
helpThe cursor indicates that help is available.Test area.
moveThe cursor indicates something is to be moved.Test area.
n-resizeThe cursor indicates that an edge of a box is to be moved up or down.Test area.
ne-resizeThe cursor indicates that an edge of a box is to be moved up and right or down and left.Test area.
nesw-resizeIndicates a bidirectional resize cursor.Test area.
ns-resizeIndicates a bidirectional resize cursor.Test area.
nw-resizeThe cursor indicates that an edge of a box is to be moved up and left or down and right.Test area.
nwse-resizeIndicates a bidirectional resize cursorTest area.
no-dropThe cursor indicates that the dragged item cannot be dropped hereTest area.
noneNo cursor is rendered for the elementTest area.
not-allowedThe cursor indicates that the requested action will not be executedTest area.
pointerThe cursor is a pointer and indicates a linkTest area.
progressThe cursor indicates that the program is busy (in progress)Test area.
row-resizeThe cursor indicates that the row can be resized verticallyTest area.
s-resizeThe cursor indicates that an edge of a box is to be moved down or up.Test area.
se-resizeThe cursor indicates that an edge of a box is to be moved down and right or up and leftTest area.
sw-resizeThe cursor indicates that an edge of a box is to be moved down and left or up and right.Test area.
textThe cursor indicates text that may be selectedTest area.
URLCustom made cursors. See the next section.-
vertical-textThe cursor indicates vertical-text that may be selected.Test area.
w-resizeThe cursor indicates that an edge of a box is to be moved left or rightTest area.
waitThe cursor indicates that the program is busyTest area.
zoom-inThe cursor indicates that something can be zoomed inTest area.
zoom-outThe cursor indicates that something can be zoomed outTest area.
initialProperties set to default values.-
inheritProperties are inherited from the parent element.-


Custom made cursors

Should you want to have your own cursors for a website, this can be done as well for most browsers (some versions of Internet Explorer will ignore this code). You start with STYLE="cursor:URL", but with the addition, that the URL must contain a path and filename for the image to be used, and there must be a back-up from the list of cursors above. The most obvious is 'auto', so if the image does not appear, you get the cursor you would normally expect, but it isn't a requirement.

If we make a small pointer, here we call it HTML-Shark_Cursor.png and place it in the directory called Graphics, then at the object, where the cursor appears, it has to say STYLE="cursor:url(Graphics/HTML-Shark_Cursor.png), auto;". The the result will be as shown for this DIV:

Test area for custom cursor.

You can also use ONMOUSEOVER as described earlier. In that case, the code is ONMOUSEOVER="this.style.cursor='url(../Graphics/HTML-Shark_Cursor.png), auto'".

There is no formal requirements for the file type, but if you are not using a square or rectangular image (e.g. a flag) it is recommendable to use a file format allowing invisible parts (i.e. file formats allowing an alpha channel). This could be gif or png files, as used in the example.