How to animate mouse cursor with custom image when loading page?

Question

Hi!

I'm trying to change cursor mouse on my website with custom images.

Here is my actual CSS:

<style type="text/css">
<!--
body {
cursor:url(images/default.cur),auto; 
}
a:hover {
cursor: url(images/hover.cur),auto;
}
a:active {
cursor: url(images/wait.ani),auto;
}
-->
</style>

Firefox 3.5.6 does change the default cursor with my .cur file but the problem is that .ani cursor doesn't work with Firefox (and even .gif). It does work on IE.

The cursor files I'm using can be found here.

The other problem is that I'm just changing a:active image to animate my cursor but it disappear fast.

I would like to change cursor when we click to go to some page and the cursor to become "normal" once this page is loaded.

What I'm looking to is a way to change cursor when somebody clicks on some internal links of my website.

I wouldn't have to change all my links to do this, but it doesn't seem to work.

I thought about some window.onload JavaScript but I didn't achieve to write it and there might be better ways.

Thanks for your CSS or JavaScript suggestions.

Answer 1

Don't. How would you like it if you went to your friend's myspace page and your cursor suddenly turned into a big purple dragon and you had no idea where it was actually pointing.

It's jarring to the user, therefore irritation. If you want to let them know something is working in the background use an animated gif displayed over the page, not as the cursor.

---

If you have too, you may be able to set it with javascript on all your the elements on the page. I don't think it cascades. If it does, just set it on body and be done with it.

Answer 2

I like your idea and i'm thinking about using the "wait" cursor on dynamic css/script includes. IMHO the cursor "wait" option is actually a better one then a "div with animated gif" over the page. Because it is standard windows functionality.