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

Hi Dan! It looks like you have found the best threads, and hopefully someone will be able to assist you with this design set up :) I will link your other thread for anyone in the community that may run across this as well.

Hi Dan!

One more FYI :) When you reply to the forums via e-mail, your signature is attached. Please feel free to pop in and edit if needed.

ooo. good to know. thanks. 

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?

Hi Soren! Hopefully someone more versed in JavaScript will be able to pop in and assist you here. I'm not familiar with that nor do we offer support for JavaScript.

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.

Hi William!

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. 

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/