Using Custom Browser Cursor

USING CUSTOM BROWSER CURSOR

This tutorial assumes some familiarity with Cascading Style Sheet and DHTML.
Cascading Style Sheet-Level 2 (CSS2) allows for cursor alterations. The appearance of the cursor can be altered by setting the cursor property of an element's style-sheet. (An element is an html object, such as a <table>, an <img>, or a <div> section on the html page. The whole html document is a <body> element.)
The syntax is as follows::
cursor: [<[url],> [predefined-cursor-type] | inherit]
You can find the official definition at http://www.w3.org/TR/REC-CSS2/ui.html.
Related products: CSS2 DHTML references.

The meaning of the parameters are as follows:

url is the URL of a cursor file. Not all browser supports this feature.

predefined-cursor-type is one of the standard cursor types. There are several of them and they're listed below.

inherit means that the cursor style inherits from its parent (this option is rarely explicitly used)

The focus of this tutorial will be on using the predefined-cursor-types. You can find info on using custom icon file on this other tutorial.

Some Terminologies

element: an element is a section within a html page , such as <body>, <table>, <tr> - ie: table row, or <div>.

style: a specification of how a particular element should look like; style defines an element attributes, such as font color, font size, and background color.

style-sheet: a section of text which specifies the style of an element. For example, to specify that <body> text should be colored red, the style sheet could look like <body style="background-color: red">

PREDEFINED CURSOR TYPES

Below are the predefined cursor types under CSS2 specification. The look of the cursors might differs slightly depending on the browser and the operating system. However, as you can see below though, they're fairly recognizable.
In the table below, you can move your mouse to the Example column, and the cursor will change to the corresponding cursor type.

Cursor Type	Comments	Example (from Windows operating system)
auto	This tells the browser to use the browsers cursor set. If you don't set any cursor style, this is the default value.
default	The regular arrow pointer.
pointer	This appears when the cursor is over a link, usually looks like a hand pointing.
crosshair	Usually looks like a plus sign.
wait	Usually an hourglass.
help	Usually a pointer with a question mark next to it.
move	Usually a cross with 4 arrows, but thicker.
text	Usually looks like an i-bar with cursor that appears when the cursor is over a text.
e-resize	A horizontal bar with arrow endpoints that appears when you're resizing a window. Might look the same as w-resize.
w-resize	A horizontal bar with arrow endpoints that appears when you're resizing a window. Might look the same as e-resize.
s-resize	A vertical bar with arrow endpoints that appears when you're resizing a window. Might look the same as n-resize.
n-resize	A vertical bar with arrow end points that appears when you're resizing a window. Might look the same as s-resize.
nw-resize	A diagonal bar with arrow endpoints that appears when you're resizing a window.
sw-resize	A diagonal bar with arrow endpoints that appears when you're resizing a window.
ne-resize	A diagonal bar with arrow endpoints that appears when you're resizing a window.
se-resize	A diagonal bar with arrow endpoints that appears when you're resizing a window.

EXAMPLES

Note: The examples have been tested in the following browsers on Windows XP: Internet Explorer 6, Netscape 7, and Netscape 6.2.

Example 1:
Changing the cursor of a html page. In this example, the cursor for the whole html page is altered to the crosshair cursor. The code uses internal style-sheet.
<head>



<style>



</style>

</head>
Show example page.

Example 1A:
Changing the cursor to the crosshair cursor. Similar to the above, except this one uses inline style-sheet.
<head>



<body style="cursor:crosshair;">



</body >
Show example page.

Example 2:
Changing the cursor to the crosshair when the mouse is over a table.
<table style="cursor: crosshair;" 

  border="2" width="80%" bgcolor="#C0C0C0" 

  cellspacing="0" cellpadding="0">







</table>
This is an example of how the cursor can be changed when it is over a specific element (in this case, the element is a <table>, but it could be an <img> or most other html elements.
This code uses inline style-sheet so that it will affect the this element only. Ie: the cursor will become crosshair only when the mouse is over this particular table. Show example page.

Example 3:
Changing the cursor to the 'help' cursor when the mouse is over a certain link.
<a style="cursor: help;" HREF="helpPage.html">Link text</A>
Show example page.
This code uses inline style-sheet so that it will affect this particular link only. To alter the cursor on every link, see the next example.

Example 4:
Changing the cursor to the help cursor when the mouse is over any link.
<head>

<style>



</style>

</head>
This code uses internal style-sheet so that it will affect the all links in the html page.
Show example page.

REAL WORLD EXAMPLES

At this point, you might be wondering... ah alright... changing cursor is cool, but what good is it for? Here are some possible real world applications. Note: The examples have been tested in the following browsers on Windows XP: Firefox 1.02, Internet Explorer 6, Netscape 7, and Netscape 6.2.

Example 1: Changing cursor to indicate hotspot areas within a html page.
In this example, when the mouse is over a key word, the cursor will change into a "help" cursor. When the user clicks on one of the key words, a popup bubble will be shown over it. Show example page.
<p align="left">This page contains

<A style="cursor:help;"

  onMouseDown="javascript: showPopup(event, 'linkPopup', 'Cascading Style Sheet');"

  onMouseUp="javascript: hidePopup('linkPopup');"

  onMouseOut="javascript: hidePopup('linkPopup');"

  HREF="javascript:doNothing();">CSS2</A> style sheet.
The portion of the code above is an example of the <a> element code. When the mouse is over the <a> link, the cursor is altered by style="cursor:help" (there's a colon between the word "cursor" and "help"). When the mouse is down, the popup is shown; this is handled by catching the onMouseDown event. When the mouse is moving out of the area or is released (onMouseUp), the popup is un-shown; these are done by handling onMouseOut and onMouseUp events..

This example uses <div> element to show and hide the help bubble. One improvement that can be made here is to make the key words not look like regular links. That can easily be done by replacing the <a></a> tags with <div>.

Note

<div>: this tag is a generic kind of element which is usually used to create a structure or a section within a html page.

Example 2: Changing the cursor when it is over image map hotspots.
This can be useful to mark points of interest on a map and to differentiate them with actual links. Show example page.
<area shape=circle coords="52,21,17"

  onMouseOver="javaScript:alterCursor('myImage', 'help');"

  onMouseDown="javascript:showPopup(event, 'linkPopup', 'Jim\'s House');"

  onMouseOut="javaScript:alterCursor('myImage', 'default');

     javascript:hidePopup('linkPopup');"

  HREF="javaScript:doNothing();"

>
The portion of the code above is an example of the hotspot area. When the mouse is over the area (onMouseOver), the cursor is altered; when the mouse is down (onMouseDown), the popup is shown; when the mouse is moving out of the area (onMouseOut), the cursor changed back and the popup is un-shown.

Example 3: Changing the cursor for a game.
In this example, the cursor under a <div> element is changed to a 'crosshair'. Show example page. This example uses <div> tags to simulate moving blocks, when the mouse is over the <div>s, it changes into "crosshair" cursor.
<div id="block1" STYLE="cursor:crosshair; 

  position: absolute; top: 0px; left: 0px; 

  width:20px; height: 20px; z-index: 902;

  text-decoration: none; background-color: 

  rgb(25,225,225); visibility:visible;

  color: white; ">&nbsp;</DIV>
Example 4: Changing the cursor to indicate that something is loading.
In this example, the cursor is changed to the "wait" cursor while an image is loading. When the 'onLoad' event is executed, the cursor is changed back into regular cursor.
<img style="cursor:wait" onLoad="javascript:alterCursor('largeImage', 'auto');"

  id="largeImage" src="images/largeimage.jpg" width="640" height="480">
Show example page. (Note: if you have a fast internet connection, you might not see the cursor changes.)

SOME NOTES

Altering cursor appearance has been known to raise usability issues. For example, if you alter the appearance of the "hand" cursor, will the user know that he/she is over a link? More ramblings.

<< MORE TUTORIALS >>