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!!
- OrestMykyta-e8aCommunity Member
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.
- PeterAndersonFormer Staff
Hey Kurt,
You can insert and customize mouse cursors in Storyline to display as part of your course, whether in a screen recording or single-slide interaction, but I don't think you'll be able to control the look of a user's personal mouse cursor as they navigate around a course. Am I understanding correctly that that's what you're hoping to do?
- WilliamWallaceCommunity Member
Bringing this back up because being able to control what the cursor looks like within Storyline based on the user's interactions is a really useful feature. I've used it in many other programs, please consider adding this to the next version of Storyline.
- OrestMykyta-e8aCommunity Member
This can be done with some Javascript. Make a trigger that runs the following JS:
document.getElementById("slide").style.cursor = "crosshair";
Replace "crosshair" with the type of mouse cursor that you want the user to have from the list below. BUT: This will change the user's mouse cursor for the rest of the course, until it is changed back. So you have to have another trigger somewhere to set the cursor back to "auto".
Here are some common cursors that are included with all modern browsers. They may look a bit different depending on the browser and OS:
- auto (Usually an arrow, but turns into the i-beam over selectable text)
- default (the normal arrow)
- crosshair (a plus sign)
- pointer (usually a hand with the index finger)
- grab (an open hand)
- none (makes the cursor invisible!)
- text (the "i-beam" cursor for selecting text
- wait (a spinning icon like when your computer is loading something)
- progress (the spinning icon with an arrow
For a more complete list with examples see here: https://www.w3schools.com/cssref/playit.asp?filename=playcss_cursor
Using your own custom image is a bit more involved... You'd have to use the "url" cursor in the javascript above, save the image as a .cur file, add it into your Storyline output folder...
- NunoCardosoCommunity Member
Hi all!
You can change the cursor to the image that you would like. See it working in the following link:
- LaurieBluemCommunity Member
I see your example. Can you explain how it is done?
- DanKonigCommunity Member
Hello Nuno,
That's exactly what I need! How did you do this?
- JudithSandersCommunity Member
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!
- OrestMykyta-e8aCommunity Member
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.
- NaveeraAshrafCommunity Member
Awesome! it works beautifully. Thank you so much for the help.
- KurtMastellerCommunity Member
Hi Peter.
Yes, My client wants to have the cursor resemble the end of the cable to teach the learner where to plug the cable in properly.
If the cursor can be customized, is it possible to change the cursor as a rollover action?
I'm just trying to figure out some way to make this work.
You guys are awesome, thank you for all your help.
- PeterAndersonFormer Staff
Hi Kurt,
This has Freeform Drag and Drop written all over it! I'll attach a quick (and painful) example below.
Something similar could also be done with Hotspots...
Would that work?
- JoeCountrymanCommunity Member
Hey Kurt and Peter,
I am looking for something similar. I'd like to change the mouse cursor image to a magnifiying glass and a crosshair. With the magnifying glass the learner would use it to hover over certain objects on the screen. The crosshair would be used in a "shooting" scenario to make it more realistic.
Is something like this possible using Javascript?
Thanks in advance.
- PeterAndersonFormer Staff
Hi Sanju,
What specifically would you like to do with the cursor?
In general, here's how to add and edit mouse cursors in Storyline.