Cursor image: Use a different image "on click" or "loading"

I was wondering how I can set a cursor image to change whe someone clicks on a link or button.
An example is:
My cursor is a tomato
When I click a link, the tomato squashes.

Is this possible and how? If not is is possible to have a different image during loading of a page?

Who is Participating?
sundaramkumarConnect With a Mentor Commented:
using javascript you can change cursor

as = 'pointer';
this will change the cusror to hand

like that you can use anyother image like =url("dot.ani");

Read this:

It explains the changing of the cursor with javascript. You can trigger it with on an onClick event.
This article on dynamicdrive shows you how to create a custom cursor:

But like what sundaramkumar has posted, it can be phone:

body{ cursor:url("yourimage.cur"); }

to appear over other elements such as a paragraph; in this case you would have the line as such p { cursor: url("yourimage.cur"); };

Remember, the image that you use for the cursor must be either a .cur or .ani format. If you can't make your own custon cursor, I recommend Debi's Cursors ( where you can can find a large selection of free custom cursors as well...

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.