is it possible to change cursor shape and size?

Question

is it possible to change cursor shape and size through two bars like this picture ?

http://s28.postimg.org/nxg2x052j/question.png

This link is redirecting us to somewhere else, Why dont you just attach the picture? — void, Feb 13 '15 at 20:51
http://stackoverflow.com/questions/18551277/using-external-images-for-css-custom-cursors — Blake Frederick, Feb 13 '15 at 20:52
@void i had tried to show it directly but it said you need at least 10 reputation to post images. iam sorry — Bebo Ibrahim, Feb 13 '15 at 20:55
@KaiQing To be honest, I don't know from where I should start,I google it several times but don't find anything to help me — Bebo Ibrahim, Feb 13 '15 at 20:59
google "css custom cursor" for example. David walsh is a pretty good source on all kinds of css tricks. He's the first result. — Kai Qing, Feb 13 '15 at 21:03
Here's another useful link in case you are stumped by the .ico file format: http://www.icoconverter.com/ - converts your png, gif, jpg or whatever to a usable .ico file. — Kai Qing, Feb 13 '15 at 21:11

Evan Bechtol · Accepted Answer · 2021-07-28T14:56:39.320

Yes, changing cursor shape and size is possible through javascript as well as CSS3. Check out these resources, they have some great information to get you started.

Here is a snippet from another SO user (Dynamically change cursor size)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>test</title>
<style type="text/css">
#hold { margin:0 auto; width:500px; height:500px; border:1px solid #000; }
#canvas { float:left; }
#top-layer { position:absolute; z-index:1; width:500px; height:500px; cursor:crosshair; }
</style>
</head>
<body>

<div id="hold">

  <canvas id="canvas" width="500" height="500"></canvas>

  <div id="top-layer" onmousemove="trackMouse(event);">
    <ul>
      <li><a href="http://www.google.com">Test Link (takes u to google)</a></li>
      <li><a href="http://www.google.com">Test Link (takes u to google)</a></li>
      <li><a href="http://www.google.com">Test Link (takes u to google)</a></li>
      <li><a href="http://www.google.com">Test Link (takes u to google)</a></li>
      <li><a href="http://www.google.com">Test Link (takes u to google)</a></li>
      <li><a href="http://www.google.com">Test Link (takes u to google)</a></li>
    </ul>
  </div>

</div>

<script type="text/javascript">

var ctx = document.getElementById('canvas').getContext('2d');

function trackMouse(event) {
  ctx.globalCompositeOperation = "source-over";
  ctx.clearRect(0, 0, 500, 500);

  this.r = 25; // Radius of circle
  this.x;
  this.y;

  this.x = event.clientX - document.getElementById('canvas').offsetLeft;
  this.y = event.clientY - document.getElementById('canvas').offsetTop;

  ctx.strokeStyle = '#000';
  ctx.lineWidth = 1;
  ctx.beginPath();
  ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, true);
  ctx.closePath();
  ctx.stroke();
};

</script>
</body>
</html>

I have already checked all this but don't find anything to help me to change cursor size — Bebo Ibrahim, Feb 13 '15 at 21:00
@BeboIbrahim Check the updates that I made, this should be what you are looking for. — Evan Bechtol, Feb 13 '15 at 21:43
http://www.ajaxblender.com/howto-create-custom-image-cursors.html - I really wasn't expecting 'Creative Gifts For Boyfriend Anniversary Ideas' — Jiří, Jul 28 '21 at 13:13
@Jiří thanks for catching that! The domain must have been sold recently. — Evan Bechtol, Jul 28 '21 at 13:16

is it possible to change cursor shape and size?

1 Answers1