20 Replies
Peter Anderson

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?

Kurt Masteller

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.

Joe Countryman

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.

Tim Murray

Joe Countryman said:

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.

Did anyone find a JavaScript solution for changing the cursor? I would like the cursor to change to a crosshair when users rollover specific objects on a slide. Thanks!
Dan Beatty

Hi staff, 

I came across this thread hoping to find an answer on something user Joe Contryman (see above thread) mentioned. I am building a course about 3D and thought it would be neat to have a pair of 3d glasses, when hovering over objects, makes the objects look 3D. I know how to set up the states for all objects, and to 'change state of' on triggers when 'mouse hovers over' objects - so I'm good there. My question is this: Can I change the mouse to be an image rather than a mouse icon? I am trying to avoid the issue of the user using their mouse to first pick up the 3D glasses then have to hover over things. I would like their mouse to already be a paid of 3D glasses. Thanks! 

Soren J Birch

I am looking at a way to do this in Storyline 2 - and I am mucking about with javascript in order to do it. It is possible within the HTML specifications to swap a system cursor out with a custom image.

Check method for the result http://www.ajaxblender.com/article-sources/jquery/custom-cursors/index.html. The jQuery method seems to be the most powerful.

Question is: Would this be possible in Storyline 2 output?

Cory Warshawsky

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. 

Orest Mykyta

This can be done with some Javascript. Make a trigger that runs the following JS:

document.getElementById("main-window").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...