Illusion of moving Cursor

Question

Is it possible to make an image appear at cursor location (for example, a cursor image) then hide the original (cursor:none;) then make the image move! Giving the illusion that the pointer is moving by itself, then making the cursor appear where the image of the cursor went. Then make the image disappear. I'm not sure about making the cursor appear

I read that it is impossible to move the cursor with Javascript for security reasons, so I was thinking of just creating the illusion of it wich is fine for my purposes. An yes or no will suffice! (so i can go foward) Didn't find much about making images appear at cursor location! :P

Answer 1

An yes or no will suffice!

Yes

Okay, so let's answer a bit more in-depth...

We make a div (#bar) where we want the "custom" pointer to be in and on which we'll hide the actual pointer:

<div id="bar">
    <div id="pointer"></div>
</div>

Set cursor to none to hide the actual pointer, set up an image in #pointer to act as substitute:

body {
    padding:50px;
}
#bar {
    background-color: green;
    width: 400px;
    height: 400px;
    cursor: none;
}
#pointer {
    position: absolute;
    width:32px;
    height:32px;
    background-image:url('//i.imgur.com/uKc3VMy.png');
}

Add a little javascript (I took the jQuery route, but it's perfectly possible using vanilla JS as well) to move the image around acting as pointer:

$("#bar").mousemove(function (e) {
    $('#pointer').offset({
        left: e.pageX,
        top: e.pageY
    })
});

Sample: http://jsfiddle.net/e9BXg/1/