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

Posted on 2007-08-08
Last Modified: 2008-05-21
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?

Question by:mrduckers
    LVL 9

    Accepted Solution

    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");

    LVL 8

    Expert Comment

    Read this:

    It explains the changing of the cursor with javascript. You can trigger it with on an onClick event.
    LVL 16

    Expert Comment

    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...


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    IT, Stop Being Called Into Every Meeting

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
    Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
    In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

    737 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now