Change the cursor or mouse pointer for custom images with CSS

CSS workshop in which we work with mouse cursors, placing static or animated images that we have customized for each of the elements of the web page.

In previous articles we were already dealing with them. However, we still had to talk about how to use totally customized images in the cursors, instead of using the models that the user has configured in his system.

In this article we are going to see how we can work with image-type cursors, that is, how we can change the mouse pointer so that it does not use the typical little arrow, but rather an image that personalizes the appearance of our website a little more. All this through Cascading Style Sheets and as far as possible, being compatible with all browsers.

Since CSS 2, mouse pointers can be altered to place personalized images, either through known graphic files, such as GIF or through the cursors’ own file format, that is, .cur for normal cursors and . ani for animated cursors. The way of working is very simple, but where we can find difficulty is in the compatibility with the different browsers that a visitor can use to access our website. However, there are techniques to try to solve possible compatibility failures that we will see below.

Syntax for declaration of cursors in CSS

The way in which the cursors that you want to use when hovering over an element are declared is very similar in both CSS 2 and CSS 3. The only difference between those two versions of the language is mainly based on the range of cursors. defaults that can be used (the normal arrow, the cursor that indicates “busy”, the hand that indicates link, etc).

To declare a cursor, the “cursor:” attribute is used, followed by the different options that we want to place, in order of preference, separated by commas. Among the options we can use are images, cursor-type graphic files, or various keywords to specify a default cursor type.

An example would be the following:

body{
cursor: url(image1.gif), url(cursor.cur), pointer;
}

In the previous case, the browser will try to place the “image1.gif” as cursor in the body of the page and if it is not compatible with that type of graphic file in the cursor, it will place the file “cursor.cur” and if it is not compatible will place the default “pointer” type cursor, which is the typical mouse arrow.

Note: The default cursor types for CSS 3 include a wide variety of pointers that point to many different things.

Of special interest is the “auto” value, which would be the default and serves to indicate that the pointer changes according to the type of content on which we have placed ourselves. For example, that it changes to the hand when we are on a link or to the text type cursor when we are on a text field.

Apart from the “auto” value, there are many other values, the list of which we can see below:

• General: auto | default | none
• Links and status: context-menu | help | pointer | progress | wait
• Selection: cell | cross hair | text | vertical-text
• Drag and drop: aliases | copy | move | no-drop | not allowed
• Resize and move: e-resize | n-resize | ne-resize | nw-resize | s-resize | be-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all scroll

I have taken this list from a cursor where we can also see an image of each of the default cursors.

Example of configuration of cursors with external files and alternative in default

Now we are going to see a first example of cursors configured through external files of type .cur and type .png.

body {
cursor: url(nat870.cur), pointer;
}
h1{
cursor: url(logodw.png), progress;
}
a, a:hover{
cursor: url(sym596.cur), help;
}

Note: PNG image cursors are not supported in Internet Explorer, at least in version 9. Therefore, when you mouse over the H1 banner, the default “progress” cursor type will be displayed in that browser.

Can

Compatibility with cursors in the most common browsers

Not all types of cursor are supported by all browsers and for this reason we have to pay special attention when using them, so that we specify different alternatives that work for each of the most common clients. For example, at the time of writing this article, animated cursors don’t work in Firefox or Google Chrome.

At this time we can take into account this list of possible values ​​​​and their considerations:

• Static cursors of the .cur type can be used in all browsers, so they are a very suitable option if we do not want to have problems.
• .ani type cursors (animated cursors) only work in Internet Explorer, so if we want to use them, we must specify an alternative for other browsers.
• Image type cursors (GIF or PNG) do not work in Internet Explorer, so we should assign an alternative for this browser. JPG type cursors do not work for me
• The special type of Animated GIF cursor doesn’t work in Internet Explorer and in Firefox and Chrome it only shows the first frame of the GIF, so we won’t see animation.

Note: As a suggestion, if we want an animated cursor that works in Firefox and Chrome, as well as Internet Explorer, it occurs to me that we could CSS set the cursor type to “none” (which doesn’t display any cursor) and Javascript it to show a layer accompanying the movement of the mouse that contains an animated image that we want to use as an animated cursor.

As said, we can indicate a cursor through different alternatives separated by commas. Let’s look at the following example to illustrate that use:

body {
cursor: url(foo51.ani), url(dw.gif), auto;
}
h1{
cursor: url(spain-white.gif), url(too879.ani), e-resize;
}
a, a:hover{
cursor: url(golf_b.gif), url(use175.ani), pointer;
}

The previous example can be

You can see it in both Internet Explorer and Firefox and Chrome to appreciate the differences between one and the other browsers, checking how the cursors displayed will be different depending on the compatibility that each browser has with each type of cursor used.

Cursor offset

We want to end this article by commenting on the possibility of moving the image used for the cursor, which is a characteristic of the CSS 3 Cascading Style Sheets definition. It is simply a matter of assigning numerical values, X and Y coordinates, to the cursors that we want, to move the image of the cursor in that amount of pixels.

body {
cursor: url(foo51.ani), url(dw.gif) 20 10, auto;
}

As you can see, the cursor alternative url(dw.gif) has the values ​​20 10, to produce an offset of the cursor image by 20 and 10 pixels in the X and Y coordinates.

This detail doesn’t work in Internet Explorer 9 at the moment, so it’s better not to use it at the moment, since IE won’t understand that and won’t show any cursor, not even the value that it would understand (foo51.ani cursor).

Conclusion on cursors with graphics files

The use of cursors may give an additional point of personalization of our web page. Be careful when using them, since certain users may feel surprised to see that the mouse pointer changes, showing shapes that may not be clear to them. In fact, I don’t think using cursors has much usability, but the option is there for those who think it’s an aesthetically pleasing detail.

In short, we have seen that there are various cursor configurations and that we can use one or the other depending on the browser, since not all browsers are compatible with all types of cursors. Specifying alternatives will save us inconvenience of using cursors that do not work on different platforms. Always remember that .cur cursors work in all browsers, so they will be suitable in any project.

If you want to increase your knowledge when creating your own pointers you can take a look at the .