Menu
I've got stuck with trying to create a custom cursor. The main problem is the cursor size – 256x256px PNG (transparent) image. The problem arises from various limitations, browser and OS. ( my previous question explains why CSS cursor {} won't work stackoverflow )
So, what are the alternatives to CSS to have a custom cursor?
293
Although the cursor size is also based on individual ope- rating systems and user preference, it usually ranges from 16x16 pixels to 32x32 pixels large.
While the specification does not limit the cursor image size, user agents commonly restrict them to avoid potential misuse. For example, on Firefox and Chromium cursor images are restricted to 128x128 pixels by default, but it is recommended to limit the cursor image size to 32x32 pixels.
The idea is scale to mouse cursor bitmap to correct size. Now this code is working but it use default 32x32 size.
As you already know, you cannot have a custom cursor that big: Windows has a limitation of 32x32 pixels.
If you want bigger than that, you'll need to use a DOM element containing your cursor image, and get it to follow the cursor.
It's relatively straightforward (especially if you do it with JQuery).
There's a discussion of how to do it here: jQuery - Follow the cursor with a DIV and How do you make a picture follow your mouse pointer with jquery?
However, please note that there will be limitations to this approach compared with having a real cursor.
The two issues I can think of straight away are:
The animation may not react as quickly as your actual cursor movements, resulting in a possible lagging effect.
and you may have issues when you hit the edge of the browser window. On the left and top edges, it's easy to just move the cursor image partially over the edge, but on the right and bottom, doing that could cause the browser to think the page size has changed, and to generate unwanted scroll bars.
66
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
