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. |
progress | difference in browsers, but shows waiting: 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
Excellent. Many developers don’t know about this but I find it to be a great trick. Any little thing you can do to give the user a more personal experience pays off.
I agree with Website Design: this is not a well-known trick, and it’s really very useful. Thanks for posting it.
hahaha… thanks a lot… this is simple but big blast to us knowing that it works in other browser like firefox ang safari…
Hi, I have been messing around with the cursors since yesterday. I made custom cursors for the body and a tags. I can see the default cursor which is a .PNG image in Firefox, but the .ANI cursor that I have, that has a spinning recycling circle does show up. In IE it shows up fine, but then also in IE the .PNG doesn’t show up?
What do I need to do in my CSS external sheet to get both browsers to render properly?
Both of my cursors are stored in my directory under:
../Images/Cursors/Links.ani and Default.png
And that is pretty much their url address within the CSS cursor rule, without the ‘and’ and in their respective tags of course. If .ANI’s work in Firefox, then why isn’t mine? My website is here:
http://www.wku.edu/~markanthony.echipare/5.0/Index/_index.php
Thanks
I never alter the cursor, so haven’t tested this stuff out since i wrote this blog entry eons ago. However, I think you may need to convert your .png to a .cur for IE support, and for Firefox support you need to add in the required default keyword. the third bullet in the notes is actually a requirement, not a suggestion according to the w3c – http://www.w3.org/TR/css3-ui/#cursor and mozillahttp://developer.mozilla.org/en/docs/Using_URL_values_for_the_cursor_property
I was thinking that with IE. But I also found out that FireFox dropped support of .ANI cursor after 2.0. So I am currently on the hunt for a possible Javascript solution. I’ll probably go static though if I can’t find anything. Thanks for the reply.
Nice trick. I tried to modify my userContent.css (Firefox), but couldn’t see the effect. By the way, is there any way to point any file in the c:\windows\cursor folder.
I tried with this
a {cursor:url(file:///C:/WINDOWS/Cursors/banana.ani);}
Pingback: Navigating Your Computer via Keyboard (for Creating Dragon Commands) — Speakeasy Solutions Blog