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

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/defaul开发者_高级运维t.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.

Please don't give design feedback when asked for programming solutions. It is not the role of developers to pass back design critique. It may not be his decision, it may not work but he wants to try it and we should help. If you've been in an environment where programmers pass critical judgement on every design decision you'll realize its very destructive for the whole team. Designers and team members will value you a lot higher if you refrain from commenting on whether or not you agree with what they want to do unless asked. I hope if you think about it you will understand why its important.

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.

if using ASP, it simplifies things a bit to use resolve url... ie

    cursor:url('\<\%\=ResolveUrl("~/img/magnify.cur")\%\>');

Evidently I'm inclined to agree with the other statements, as familiarity is key in any good design, customizing an environment to such a degree that the user feels either unfamiliar with it or under the impression that somehow their system is altered,is a bad bad bad design and reflects poorly on the designer as well. I'm not saying be dull in design, but be a tad reserved.

I might not like MetroUI (rather Metro Web Design) much, but I love it's root,the design concept of "Bauhaus".

"There is beauty in simplicity."