CSS, JavaScript and XHTML Explained

Controlling cursors with CSS and creating .cur files April 21, 2007

Creatings Cursors, a.k.a. .cur files

You can convert images such as .jpgs or .gifs into cursors. A static cursor is saved as a .cur file. An animated cursor is saved as a .ani file.

To create a .cur or .ani file, you need specialized imagery software that is freely available. Available software includes the free Just Cursors that is a bitmap style editor and Icon Forge which costs money, but has much greater capabilities.

Here are the steps:

• Download and install the imagery software of your choice, listed above.
• Convert your image to a .cur file if you want a static cursor. For animated cursors, convert your animated .gif file into a .ani file.
• Upload your image to your server.
• Write a CSS class to target the cursor (see below for instructions)

Including cursors with CSS

To include image cursors, you need to have the .cur file loaded onto a server on the Internet so that you can point to it:

<style type="text/css">
li { cursor:url(http://www.yourdomain.com/images/yourimage.cur); }
</style>

If you want to simply control the browser default cursor with CSS you don’t use the image path, but rather, the cursor name:

li { cursor: text; }
a {cursor: pointer;}

Controlling cursors with JavaScript

You can dynamically change your cursor using javascript:

object.style.cursor="text"

List of Browser Cursors

Hover over any of the definitions below to see how the cursor renders in your browser:

Value		Appearance and default browser defined usage
url(image.cur)		Image cursor you defined (if browser supports it)
default		The default cursor: default value for disabled form elements and media="print" styles.
auto		The browser’s default cursor: input[type="hidden"]
crosshair		Like a big plus sign
pointer		hand pointer: input[type="image"]
move		cross with four arrows: Image Resizing
e-resize		left-right arrows: Image Resizing
ne-resize		arrows pointing northeast & southwest: Image Resizing
nw-resize		arrows pointing northwest: Image Resizing
n-resize		arrows pointing up & down (points northeast in IE): Image Resizing
se-resize		arrows pointing northwest & southeast (points northeast in IE): Image Resizing
sw-resize		arrows pointing northeast & southwest:Image Resizing
s-resize		arrows pointing up & down (points northeast in IE): Image Resizing
w-resize		left-right arrows: Image Resizing
text		Line up and down, indicating text: input, textarea, a:visited, a:hover
wait		Watch or hourglass
help		Question mark or balloon: not a default browser value for XHTML, but often used in conjunction with elements having a title attribute.

Note:

• I recommend against using image cursors, especially animated .gif cursors, since they are annoying.
• You can even convert a Flash movie into a cursor: first export the movie as an animated gif, then export your .gif to an .ani file.
• If you are declaring an image cursor, remember to always define a generic cursor at the end of the list in case none of the url-defined cursors can be used. A list of cursors should be specified, followed by a standard cursor designation. Then, if the user’s browser cannot handle the image cursor, it will use the the other specified cursor. If that doesn’t work, it will use the default cursor defined by the browser.
  {cursor: url("firstcursor.cur"), url("secondcursor.cur"), pointer;}
• Safari, IE and Firefox support cursors of type .CUR and .ANI. URL-specified cursors are not yet supported by Netscape and the alternate cursor does not load, so you’ll get the default.
• .cur is for a regular cursor, .ani is for an animated cursor.
• To see the cursors on your desktop on windows navigate to C:\WINDOWS\Cursors