[DHTML] Animated cursors anyone?

1) CODE TITLE: Animated cursors

2) AUTHOR NAME: Shachi Bista

3) DESCRIPTION: Lets you have "animated" cursors in FF.

4) URL TO CODE: http://shachi.prophp.org/animcur.html

5) NOTES: This isn't cross-browser. I didn't need to make it as IE already supports the .ani format. I got the cursor images from: http://www.maxthemes.com/guistuff/?g...%20Cursors and used http://www.xoyosoft.com/gs/index.htm to chop it down into different images then I used gimp to convert the bmps to pngs and then again used: http://converticon.com/ to convert the pngs icos and simply renamed them to a .cur extension. This script takes up some resources because of the constant setInterval after every 30 ms.

6) BROWSER COMPATIBILITY: Tested with, FF 2.0.0.1. Please feel free to test it and please post your name and version of firefox you test it with, it will be listed here. :)

Tested with FF1.5 -- by drj33 & jscheuer1 - Works fine :D
Tested with FF1.5.0.9 -- by jscheuer1 - Works fine :D
Tested with IE7 -- by jscheuer1 - Doesn't work.
Tested with Opera -- by jscheuer1 - Doesn't work

Enjoy!!

FF1.5

Hmm.. interesting.

It's a big buggy... the normal cursor shows up if you scroll too fast, click, etc.

The buttons don't seem to do anything.

The animation apparently loops every second or two, with a slight white flash between the beginning and end frames (at least I assume this is the case).


Though IE may already support this, it is a good idea to make it cross browser compatible. Right now you're making a FF only script, and that's a bad idea. Using .ani is fine, but you should include a browser check then, or better, function check, to determine if the .ani or your script should be used.

No work in Opera. I think if you used .cur files instead of .png it might. I didn't see the problems like djr33 did. Worked fine in FF 1.5 unless I hit start it again without having first stopped it. You need some way to prevent multiple intervals. I'd try clearing at the beginning of the stop and start events (you are clearing timeout after reset but, there is no timeout):

Code:

---

<input type="button" value="Stop the animation" onclick="clearInterval(c);reset();">
<input type="button" value="Start it again" onclick="clearInterval(c);c = setInterval('changeCur()', 30);">
</body>
</html>

---

jscheuer1: done with the changes you pointed out. I guess it is the problem with .pngs but the .curs I made are too small(or at least they appear too small).

Works good in FF 1.5.0.9 now here. I just tried it out in IE 7 and, I am unsure why but, it doesn't work. I can tell you that the .png images try to load but never have a chance to get cached. Perhaps if you preloaded them it would work in IE 7. Or, IE 7 may also require .cur files. IE 7 does support the .ani files for animated cursors though.

Good updates, whatever they were. All of the problems above (that both John and I had) are now fixed.

One issue is that the actual pixel at which the mouse is touching and interacting (the point of the arrow) is not any logical position in the sphere.... in fact, it's a point about 5px from the edge of the sphere.

I see that too, more specifically it (the position of the unseen arrow tip) appears to be about 5px diagonally from the upper leftmost point of the animated cursor. This is not a huge deal. One thought I've been having in connection with this effect though is a different approach - that you could use a single transparent .cur file for the cursor and then position an animated .gif file based upon the mouse's coordinates. This might have the problem of the mouse seeming to be over the .gif when it needs to be over other elements on the page to trigger events.

drj33: now, that's strange. I didn't do any updates(except the onclick events of the buttons).

drj33, jscheuer1: I am not sure about the pointer of the cursor. I hope to fix that soon(hopefully)

Quote:

---

Originally Posted by jscheuer1

One thought I've been having in connection with this effect though is a different approach - that you could use a single transparent .cur file for the cursor and then position an animated .gif file based upon the mouse's coordinates. This might have the problem of the mouse seeming to be over the .gif when it needs to be over other elements on the page to trigger events.

---

That is a good idea too. If we do this we will not have to use setInterval thus not overloading the performance.

EDIT: I just realised where my Mouse object comes into action. And by the way I have changed the cursor extension to .cur too.

EDIT: Something just came to my mind. Usually when the cursor is busy the document.onmousedown function is canceled, so I don't think that the pointer would be much of a big problem. What do you think about it?

Yeah i like this script! It looks nice.

Thank you iMarc. :)