Change mouse cursor on rollover or use a custom image for cursor

I see your example. Can you explain how it is done?

Hello Nuno,

That's exactly what I need! How did you do this?

I like it Nuno, but there is no explanation how you did it / or a script attached to your nice example. It's perfect indeed!

Here's how Nuno made his example:

1. He created the cursor images and saved them as .cur files. To create a .cur file you can find converters online such as this one: https://convertio.co/png-cur/

2. Each button has a JavaScript trigger with the following code, with the name of the correct .cur file:

var elementToChange = document.getElementsByTagName("body")[0];
 elementToChange.style.cursor = "url('http://www.nuno-cardoso.pt/articulate/change_cursor/cursors/rocket.ico'), auto";

However, this code can be simplified like this:

document.body.style.cursor = "url('cursors/rocket.ico' ), auto");

This simplified code will work wherever you host the presentation while his version would only work on his website.

3. After publishing, create a folder called "cursors" inside the published output folder and place all the cursor files in there.

This is amazing! How did you do this?

It would be very good if you could help us share how you achieved this

Just to follow on from this. I have used the code example above to change the default cursor but when I hover over an interactive dial the cursor reverts back to the standard "pointer" finger. Any way to remove this hover state from the dial so my users see the custom cursor all the time?

You're right. It seems that interactive elements handle their cursors separately. Here is the code that would change the cursor everywhere, include interactive elements like dials.

document.body.style.cursor = "url('cursors/rocket.ico' ), auto");

var styleElem = document.createElement("style");
styleElem.innerHTML = ".cursor-hover:hover *, .rotatable:hover * {cursor: url('cursors/rocket.ico' ), auto}";
document.head.appendChild(styleElem);

The first line applies the cursor to most elements. The rest overrides Storyline's rules for setting the cursor on interactive elements.

 You can replace "url('cursors/rocket.ico' ), auto" with any of the built in cursors like "move" or "grab" (see list here). Or use your own custom image. Just remember to add your custom image to the output folder after publishing, as described in a previous comment.

But as a forewarning: this is a bit more dependent on how Storyline publishes currently. It is possible that future releases might change things and it won't work. (I don't mean that a project you publish today will suddenly stop working, but if you need to update it a year from now, you might re-publish and find that the cursors are back to normal)

Amazing, that did it! Thank you.

I'm guessing this means that you could target different interaction types on a slide and use different cursors for sliders, dials, buttons etc...? Could make for some fun design elements.