0

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?

Community
  • 1
  • 1
Tama Yoshi
  • 303
  • 2
  • 15
  • So you want to change the users mouse symbol to any kind of image? Would not it be more user friendly to show a tooltip next to the mouse cursor? – dsuess Jun 11 '14 at 17:18
  • For reference, my solution was to reduce the entire chessboard to a single canvas that I rendered manually, and then draw the 'held' chess piece under the mouse on that canvas. The result can be found here: https://www.codecademy.com/fr/TamaYoshi/codebits/5Tm2R1 – Tama Yoshi Jun 22 '17 at 12:58

1 Answers1

1

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!

Valijon
  • 12,667
  • 4
  • 34
  • 67
  • I tried, but I get very strange glitches whenever I use the 'show' method. So far, the cursor works, but it is extremely laggy AND it overrides the code within the block of code it is in. In other words, the code reads that I should execute "A" and THEN show the cursor, but it shows the cursor without executing "A" SOMEHOW. From that point on, the code is frozen... Is there any way to avoid using "show"??? – Tama Yoshi Jun 20 '14 at 13:02