Controlling cursors with CSS and creating .cur files

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.

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

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:

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.