Skip to main content
RMorrisNZ
Participating Frequently
December 14, 2015
Answered

How do I hide text when doing a mouse rollover?

  • December 14, 2015
  • 2 replies
  • 987 views

I'm quite new to Captivate, and I'm hoping to hide a text box when doing a mouse rollover. The idea is that text fades in when mousing over a certain part, but I need the background text to disappear for this to work effectively.

I assume I need to use an Advanced Action, and figured out the Action part easily enough, but can't see to figure out what the IF part needs to be. Any help will be appreciated.

Thanks

This topic has been closed for replies.
Correct answer RodWard

I hate to break this to you...but it hasn't been a perfect world for several thousand years now.  And it's not getting better.

Captivate suffers from a distinct LACK when it comes to mouseover events for triggering interactivity.  There's a new HTML5 widget that will be out soon that addresses this issue, but you'll have to wait for it.  And as it is ONLY for HTML5, you cannot use it with SWF output.

If you ARE using SWF, there is an Event Handler widget from Infosemantics that enables you to trigger actions for both mouseover and mouseout events.

About Infosemantics Event Handler Widget | Infosemantics Pty Ltd

Free trial versions of the widget are available here if you want to test it:

Free Trial Versions of Adobe Captivate Widgets | Infosemantics Pty Ltd

2 replies

Jordster1
Participating Frequently
December 14, 2015

So the infuriating answer to this is that even though Cap uses JS - a wickedly powerful DOM manipulation language - it often effectively hobbles it for its own overhead, leaving you to root around trying to hack it. That's the knee-jerk reaction I seem to have, anyway. In this case the reason probably has more to do with mobile support - do or do not, there is no rollover in mobile, and Cap is probably trying to prevent you from doing something that won't be supported if your training has to work on phones/tablets/etc. But lets hack at it anyway and see what we get!

I created a button ("hideTextButton") and a text caption ("Text_Caption_1") on the first slide of an empty project to see if I could shoehorn Cap into respecting a mouseover. On the onEnter of the master slide I added a script to grab a reference to the button and caption DOMs, added a native mouseenter event to the button, and logged both the hooks to the DOM and (hopefully) the event firing to the console to confirm everything's existence. See below:

Previewing the project in HTML5 in Browser this was the result:

We can actually get a mouseover to fire! In this case I hovered over that button three times before taking the screencap. But something in Cap almost immediately reset the CSS state - I watched the CSS display value flicker to "none" and blink right back to "block" on each hover.

The next trick would be hunting down what function/functionality was switching the state back to display or use something other than a text caption object. Something that isn't subject to Cap resetting its state. Maybe a smart object? Dunno, you'd have to tinker with it a bit and see which thing you had more control over and that Cap didn't reset. I also tried setting the visibility to "hidden" instead of display none and had similarly unsatisfying results. But if you did get it working you could potentially cause frustrating or impassible functionality by tying information or progression to an event that isn't supported in mobile environments...

RMorrisNZ
RMorrisNZAuthor
Participating Frequently
December 14, 2015

Wow. Thanks for the great answers. It sounds like Captivate really doesn't want me to do it, so I think I'll just focus on designing around it (it wasn't overly elegant anyway).

Jordster1, your effort is hugely appreciated. I think I'll take a look into that for anything else I might need in the future

Jordster1
Participating Frequently
December 15, 2015

No problem, happy to help!

RodWard
Community Expert
Community Expert
December 14, 2015

You're going to run into problems trying to use Advanced Actions for this because they require you to use events to trigger them, and Captivate only really has one object that can trigger an action on mouse over.  That's the Rollover Slidelet object found under the Objects button.  However, although it has a rollover event, it has no rollout event that you could use to undo whatever the rollover event did.

I suggest you are probably better off just doing this the easy way using a Rollover Caption object.  No advanced actions required then to show or hide text in the caption.

RMorrisNZ
RMorrisNZAuthor
Participating Frequently
December 14, 2015


Hrmm. It wasn't so much the text I want to show that's the problem.

Imagine a slide with a textbox on it, and there are buttons on the side. At the moment I have it so a small caption appears when you have the mouseover, but in a perfect world I'd also like the textbox in the middle of the slide to fade out as well.

Sounds like it's not possible though.

RodWard
Community Expert
RodWardCommunity ExpertCorrect answer
Community Expert
December 14, 2015

I hate to break this to you...but it hasn't been a perfect world for several thousand years now.  And it's not getting better.

Captivate suffers from a distinct LACK when it comes to mouseover events for triggering interactivity.  There's a new HTML5 widget that will be out soon that addresses this issue, but you'll have to wait for it.  And as it is ONLY for HTML5, you cannot use it with SWF output.

If you ARE using SWF, there is an Event Handler widget from Infosemantics that enables you to trigger actions for both mouseover and mouseout events.

About Infosemantics Event Handler Widget | Infosemantics Pty Ltd

Free trial versions of the widget are available here if you want to test it:

Free Trial Versions of Adobe Captivate Widgets | Infosemantics Pty Ltd