0

I want a 482 x 519 .png file to become the pointer on my website. I do not want to use the CSS cursor property, as that will not work with what I want to do. I am fairly new to webdesign so please help me in terms that I will understand. All I want is for the image to cover the mouse pointer, but still remain functional. The image file is also in the same directory as the html file.

(I can use jQuery on my site, so any solutions involving jQuery are fine.)

  • look into `cursor:none;` (to hide the cursor) then look into [image following mouse](http://stackoverflow.com/questions/1677848/how-do-you-make-a-picture-follow-your-mouse-pointer-with-jquery). P.S. Stackoverflow is for helping, not doing. Please show us what you've researched or tried and we can help you better – ntgCleaner May 09 '15 at 01:58

1 Answers1

1

Ok! So we can only sorta do this without CSS.

What we can do with jQuery only is move an image to be right under the cursor. This would work for that:

$(document).mousemove(function() {
    var mouseY = event.pageY;
    var mouseX = event.pageX;

    if(mouseY && mouseX) {
        console.log(mouseX, mouseY);

        $(".under-cursor").offset({
            top: mouseY,
            left: mouseX
        });
    }
});

The issue is that this still has the cursor visible. This CSS would hide the cursor here:

html {
    cursor: none;
}

Here's a working JSFiddle that uses this JavaScript and CSS: http://jsfiddle.net/br1ckb0t/gsycumyy/

But that CSS has two downsides:

  1. It uses CSS.
  2. Then the mouse becomes nonfunctional.

So you probably want to either:

  1. Use CSS.

or:

  1. Use the JavaScript I wrote and allow the mouse cursor to stay.

This make sense? Hope you get it figured out!

rickcnagy
  • 1,774
  • 18
  • 24
  • It's great, thanks. But now the cursor is not functional (I can't click on links). How can I fix this? –  May 10 '15 at 04:27
  • oh - sorry for forgetting to respond, @user3758129! Did you try removing the `cursor: none;`? – rickcnagy May 12 '15 at 02:11
  • Yes, and the image prevents me from clicking anything on the page... –  May 14 '15 at 00:19