CODEWITHSUNDEEP
javascriptcsscursor
Tama Yoshi
Tama Yoshi

Reputation: 313

Javascript - Display an image under the cursor

I have an HTML chessboard with chess pieces, and everything works. In order to avoid the drag & drop tediousness, I made the chess pieces background-images. On mousedown, I remove the piece at the position, and on mouseup I place it back. The only thing that is missing from the aesthetic is the image of the piece to be displayed under the cursor in-between.

I tried this:

cursor:url('http://upload.wikimedia.org/wikipedia/commons/c/c7/Chess_pdt45.svg'), auto;

But there are several setbacks with this method.

  1. The image cursor needs to be at most 32x32 pixels in order to guaranty compatibility

  2. It's unclear whether the format I want will be supported at all.

  3. I don't know if the cursor image has width and height properties, meaning I cannot resize the image so that it looks exactly like what's on the board.

  4. The cursor position is top-right, whereas it should be centered-centered, since chess pieces are... well, held from their center.

The big question is whether there's a workaround to all of that. Is it, for instance, possible to make a canvas that appears under the mouse?

Upvotes: 0

Views: 1036

Answers (1)

Valijon
Valijon

Reputation: 13103

Unfortunately, you cannot modify cursor properties, like width/height or position...

But, I have found interesting article how to imitate cursor with div element. http://www.ajaxblender.com/howto-create-custom-image-cursors.html

Hope this helps you!

Upvotes: 1

Related Questions