change cursor on web page

Question

I am trying to change cursor with .gif image. It will be shown on whole page not only one link. I made it like

<style type="text/css">
body {
cursor:url(Butterfly.gif);
}
</style>

it does not work. I have also .cur file. It works on IE but not on Firefox.

Answer 1

You might want to use the absolute path (http://www.example.com/images/Butterfly.gif) to be sure that it works at all, instead of the relative path (Butterfly.gif).

Answer 2

If you insist, you have to use the .cur file for the sake of Internet Explorer.

Internet Explorer up to and including version 8 only support URI values of type .CUR and .ANI. (The other listed browsers list have support for .CUR, .PNG, .GIF and .JPG but not .ANI .) Note also that the Windows operating system requires the image to be 32 x 32 pixels or smaller although the specifications do allow for larger sizes than this.

http://reference.sitepoint.com/css/cursor

Although I'd say don't use it at all.

Answer 3

You have to add a fallback, e.g.

body {
  cursor: url(Butterfly.gif), url(Butterfly.ani), auto;
  /*                                            ^^^^^^ 
                                                compulsory, according to CSS 2.1
   */
}

See https://developer.mozilla.org/en/Using_URL_values_for_the_cursor_property for detail.