Forum Discussion

KurtMasteller's avatar
KurtMasteller
Community Member
13 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...
storyline 360
AlistairMontgom's avatar
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's avatar
    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's avatar
      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.

       

Related Content