Css – How to animate mouse cursor with custom image when loading page

animationcsscursorfirefoxonload

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.

Best Answer

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.

Related Topic