Just to add another cool information that I found (and a functional example!), I decided to create this answer. :)
From of that OS thread(en), i learned that it is also possible to embed the cursor directly into the CSS via the image data encoding used in base64. With the help of online tools such as that one or that one, a submitted cursor image can be easily converted into an encoded data string.
I used the following images in PNG format, created from of this free-use original:
I coded each one using one of the mentioned tools, and used the following syntax to define the cursors:
cursor: url(data:image/png;base64,iVBORw0KG...), auto;
This example in Jsfiddle contains the encoded data of each of the above cursor images and allows testing the operation of this suggestion.
The main advantage I imagine of this use is precisely to reduce the number of resource requests to the server. Looking for more on that I found this other thread in the OS(en) that has a very nice response regarding the care/limitations of this approach. Translating freely below:
It is a good practice commonly used only for small images in
CSS to be used together (such as sprites), when the
compatibility with IE does not matter much and especially when the
savings on requests is more important than "cacheability"
(images in this format are not cached by the browser).
Has an important number of negative points:
- It does not work at all on IE6 and IE7.
- Works for features up to 32k in size in IE8. This is the limit that applies to encoding the representation after encoding in
Base64, i.e., no strings larger than 32,768 are allowed
characters.
- Saves on request, but loads the HTML page! And stops caching images. They are loaded every time the page or CSS containing
the encoded string is loaded.
- Base64 encoding increases image size by 33%.
- If a feature is used that is compressed with gzip, this will cause a considerable cost on the server! Images traditionally use
too much CPU to be compressed, with little compression in size.
EDIT: I did some tests here (windows 8.1 64bits) with example Jsfiddle. It worked perfectly on Chrome (32.0) and Firefox (26.0), but didn’t work on IE11.
EDIT2:
The @Leandroamorim answer solution doesn’t work IE11 even if a URL is given directly to a png or gif file. After much searching, I noticed that for this to work in IE the image used should be in . cur or . Ani format (this indication of need to use the "cursor" format for IE is in the CSS 2.1 specification referred to in the @Kazzkiq response).
As the cursor format is accepted by other browsers, to work in general (cross-browser) always use this format instead of png or gif.
It is quite easy to get the files in . cur format:
- Via GIMP (for example), save the images in format . ico;
- Then use this Python script to convert the . ico files into . cur files;
- Use . cur files in CSS as suggested by @Leandroamorim:
cursor: url(red_pointer.cur), auto;
I just couldn’t use the cursor in the approach of including the data encoded in Base64. Probably because I don’t know how to identify the type of data format (data:image/x-icon and data:image/png do not work...). If someone knows how to do, would appreciate the indication. :)
For usability reasons, it is best not to change the mouse cursor. It leaves the operating system native cursor.
– user622
@Gabrielsantos Although you are right for some scenarios, the application I am developing is a game in which color selection is part of the mechanics. Using the mouse to indicate the selected color seemed to me an appropriate strategy (in the objects the player interacts with - including the color selection buttons that change the mouse and have a mutually exclusive visual indication of "pressed" status - there are different symbols to assist people with some degree of color blindness).
– Luiz Vieira
@Gabriel Santos, your observation would be nice if Luiz Vieira was in doubt or showed a concern about usability, otherwise instructing him not to do what he wants does not add anything to a solution of the problem.
– Joao Paulo