Forum Discussion
Change mouse cursor on rollover or use a custom image for cursor
Is it possible to use a custom mouse cursor for an interaction, or change the mouse cursor to an image instead of the pointing hand?
I have been asked to do this and I can't figure out a way to make it happen.
Thank you so much for your help!!
34 Replies
Hola, puedes cambiar el cursor con un accionador de JS
var elementToChange = document.getElementsByTagName("body")[0];
elementToChange.style.cursor = "url('URL-A-LA-IMAGEN-PUEDE-SER-PNG-DE-UNOS-40px'), auto";
para regresarlo al cursor normal:var elementToChange = document.getElementsByTagName("body")[0];
elementToChange.style.cursor = "default";Saludos
Hi all!
I have managed to change my cursor to a custom image using JavaScript. But it doesn't change the pointer cursor (the little hand icon) when hovering over the links. any idea on how to change that?
To change the cursor on all hyperlinks within text, use the following JavaScript:
var styleElem = document.createElement("style");
styleElem.innerHTML = '.link-hit-area {cursor: crosshair}';
document.head.appendChild(styleElem);To change the cursor on all buttons and hotspots, use the following JavaScript:
var styleElem = document.createElement("style");
styleElem.innerHTML = '.cursor-hover:hover {cursor: crosshair}';
styleElem.innerHTML = '.cursor-hover:hover * {cursor: crosshair}';
document.head.appendChild(styleElem);The above change the cursor to the Crosshair style. Replace "crosshair" to whichever you like from the list in my post above.
Awesome! it works beautifully. Thank you so much for the help.
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.
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.
