Forum Discussion

Community Member

12 years ago

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

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.