Two kinds of cursors in HTML5

Hello fellow developers,

I am having an issue with the cursor/mouse-pointer in Storyline 2. When I watch my module in HTML5 I get different kinds of cursors.

Sometimes when I hover a button I see a "hand-icon" and sometimes I see an "arrow". I just want it to be te hand-icon, but I haven't got an idea how I get the different cursors in the first-place.... I have never adjusted any settings to change it.

It only occurs in HTML 5 and not when I preview it or play in any other way

Can somebody please help me? Thank you!

12 Replies
Ryan Martin

Hey Patrick.

HTML5. If you have other design elements within your states, it breaks the Hand Cursor in HTML5.

For example. Within the Normal & Hover states I pasted in my own custom arrow icons.

HTML5 recognized the arrows within the states and the hover worked; however the hand cursor did not work as it supposed to.

Workaround:

If possible, put your design elements (arrows in my case) as background pictures. Format Shape > Fill > Picture. This is more work. Opening up Photoshop, and sizing up your background graphic to fit properly.

I'm only assuming you had the same problem as I.

@Ashley. Is there a place where these types of workarounds get archived within the community? Be helpful.

Ashley Terwilliger-Pollard

Hi Ryan,

All posts and forum threads are saved, unless the original author choose to delete their post. So in that sense everything is "archived" and searchable. If our team finds a thread that is particularly popular or an item worth sharing they may choose to write it up as a KB/Support article and than it would also be available in the section such as here. 

Karen Siugzda

I have the same problem as the original poster.  (storyline 2, HTML5 publish)

I have buttons that I've added elements to within the states. And for those buttons, the cursor does not change over to the hand on rollover.  It would be very cumbersome and time consuming to use Ryan's method.

Is there any other way I can trigger the hand cursor to appear on hover?

It's been several years now. One would hope that this has been addressed and fixed!

Ashley Terwilliger-Pollard

Hi Karen,

This discussion is a bit older - so it's hard to know it's also the same issue. 

The hand should appear on a standard button or hotspot used - but there isn't a trigger to include the hand. Did you insert these items as buttons or create a shape that had triggers for when the user clicks? 

If you'd like to share a copy of your .story file, we're also happy to take a look! 

Karen Siugzda

Hi Ashley

They are images that I've created Normal, Hover, and Visited states for. They trigger layers to appear. 

I've posted the file in another thread, due to an additional issue happening. Not trying to double post :p 

https://community.articulate.com/discussions/articulate-storyline/html5-experience-and-fixes#reply-452001

Attaching the file here as well for specific reference to the cursor issue

(hover states not appearing is the other issue I'm having, although all works fine in Preview. Publishing and viewing in HTML5 shows the problems)

Ashley Terwilliger-Pollard

Hi Karen,

Thanks for the copy of your file! I gave it a test and I saw what you were describing and within Storyline 2, the hand cursor doesn't show in the HTML5 output when you're using a picture/image within the hover state. Since your hover state is the same as the normal state it's based on that image you've inserted. 

One of the suggested workarounds was to use a hotspot over the image to change the state and allow it to demonstrate the hand cursor. 

The issue seen here is something we've reported to our team as a software bug and continue to keep an eye on it to evaluate how many customers are impacted and what impact it has on courses. The number of customers and depth of impact are two of the elements that help us prioritize bugs and fixes. 

Here's some more detail about how we tackle bugs. 

I did want to let you know that based on the way we have redesigned the HTML5 output in Storyline 3/360 this issue is not present there. 

I'm really sorry that I can't say if this issue will be fixed but you're in the right place to stay updated on this bug's progress. 

Karen Siugzda

Hi Ashley

Thanks for your response.

The hover state is the same image, but it has a shadow effect applied, which does not work in HTML5. Is that a known bug too?

I played around with the hotspot suggestion and do see how it activates the hand icon.

However, the hotspot now interferes with the image's hover state activation (prevents it from showing the new hover state image I inserted). It just seems so clunky to now have to add a trigger to every hotspot to show the image's hover state -- when that's something typically built-in to the program otherwise.

Your new programs sound lovely, but shelling out another $700 for SL3 isn't doable since I purchased SL2 just prior to the SL3 release earlier this year. And the reoccurring cost of $1000 annually for the 360 suite is certainly not in the budget. Wish you had lower price points, sales, discounts, etc.

I appreciate your input. Guess I'll just have to resort to the work-arounds. 

thanks!