Cursors and how to change them

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.

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:

• Using STYLE="cursor:CursorType", i.e. cross-hair will be STYLE="cursor:crosshair"
• Using ONMOUSEOVER="this.style.cursor='CursorType'". This is actually a JavaScript. If you want something like the cross-hair, you write ONMOUSEOVER="this.style.cursor='crosshair'"

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.

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.

Cursor	Description	Test area. Place the cursor above the cell to see the effect.
alias	The cursor indicates an alias of something is to be created.	Test area.
all-scroll	The cursor indicates that something can be scrolled in any direction.	Test area.
auto	Default. The browser sets a cursor.	-
cell	The cursor indicates that a cell (or set of cells) may be selected.	Test area.
context-menu	The cursor indicates that a context-menu is available.	Test area.
col-resize	The cursor indicates that the column can be resized horizontally.	Test area.
copy	The cursor indicates something is to be copied.	Test area.
crosshair	The cursor render as a cross-hair	Test area.
default	The default cursor	Test area.
e-resize	The cursor indicates that an edge of a box is to be moved right or left.	Test area.
ew-resize	Indicates a bidirectional resize cursor.	Test area.
grab	The cursor indicates that something can be grabbed.	Test area.
grabbing	The cursor indicates that something has been grabbed.	Test area.
help	The cursor indicates that help is available.	Test area.
move	The cursor indicates something is to be moved.	Test area.
n-resize	The cursor indicates that an edge of a box is to be moved up or down.	Test area.
ne-resize	The cursor indicates that an edge of a box is to be moved up and right or down and left.	Test area.
nesw-resize	Indicates a bidirectional resize cursor.	Test area.
ns-resize	Indicates a bidirectional resize cursor.	Test area.
nw-resize	The cursor indicates that an edge of a box is to be moved up and left or down and right.	Test area.
nwse-resize	Indicates a bidirectional resize cursor	Test area.
no-drop	The cursor indicates that the dragged item cannot be dropped here	Test area.
none	No cursor is rendered for the element	Test area.
not-allowed	The cursor indicates that the requested action will not be executed	Test area.
pointer	The cursor is a pointer and indicates a link	Test area.
progress	The cursor indicates that the program is busy (in progress)	Test area.
row-resize	The cursor indicates that the row can be resized vertically	Test area.
s-resize	The cursor indicates that an edge of a box is to be moved down or up.	Test area.
se-resize	The cursor indicates that an edge of a box is to be moved down and right or up and left	Test area.
sw-resize	The cursor indicates that an edge of a box is to be moved down and left or up and right.	Test area.
text	The cursor indicates text that may be selected	Test area.
URL	Custom made cursors. See the next section.	-
vertical-text	The cursor indicates vertical-text that may be selected.	Test area.
w-resize	The cursor indicates that an edge of a box is to be moved left or right	Test area.
wait	The cursor indicates that the program is busy	Test area.
zoom-in	The cursor indicates that something can be zoomed in	Test area.
zoom-out	The cursor indicates that something can be zoomed out	Test area.
initial	Properties set to default values.	-
inherit	Properties are inherited from the parent element.	-

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:


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.