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!!

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.

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?

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.

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...

Hi all! You can change the cursor to the image that you would like. See it working in the following link: http://nuno-cardoso.pt/articulate/change_cursor/

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

LeslieMcKerchie
Staff
9 years ago
Hi William!

You are welcome to share your thoughts with our product development team here.
CoryWarshawsky-
Community Member
7 years ago
Much like Dan, I want to be able to "hijack" the learner's actual mouse cursor.

An example usage: I'd love for the learner's mouse to become a pen. As soon as the learner's cursor moves from anywhere on their desktop to landing over the storyline file, I want the cursor to become the pen. (or at least automatically have an image of a pen hover directly under it.)

Here is an example of a website that does this: http://www.3h-i.com/

Would be extra cool if the pen was a highlighter and the learner could actually highlight something on screen. Or the cursor automatically left a translucent yellow line as the learner moved it across a slide.
AlexPaniagua
Community Member
5 years ago
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
NaveeraAshraf
Community Member
5 years ago
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?
AlistairMontgom
Community Member
4 years ago
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?
- OrestMykyta-e8a
  Community Member
  4 years ago
  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)
  - AlistairMontgom
    Community Member
    4 years ago
    
    Orest Mykyta
    
    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.