• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers

HTML5 Rollover Replacement

Participant ,
Jan 25, 2016 Jan 25, 2016

Copy link to clipboard

Copied

Don't know if anyone has figured this out, but I found a way to create a rollover that works in HTML5. While the standard rollovers do not work in HTML5 and are pointed out in the HTML5 tracker, there does not appear to be any issue with using a Click Box and Hint. Just follow these steps:

1. Create a click box.

2. Under Properties/Actions/Display, uncheck Success and Failure (leave Hint checked).

3. Click on the text box and select the appropriate caption type.

4. Enter the desired text in the text box.

5. Place the click box over the area of the screen you wish to have a rollover.

Now when you play the slide and roll your mouse over the click box, your rollover text will display and you won't see any issue in the HTML5 tracker.

Enjoy!

Darin

Views

2.0K

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jun 19, 2018 Jun 19, 2018

Copy link to clipboard

Copied

Just stumbled across this solution... still relevant, and works perfectly for my needs. THANKS!!!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 19, 2018 Jun 19, 2018

Copy link to clipboard

Copied

Great, but know that it will not work in a responsive project with Fluid Boxes because click boxes are not supported for that kind of projects?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jun 19, 2018 Jun 19, 2018

Copy link to clipboard

Copied

I just have a simple need for replacing a bunch of text rollovers only, so it completely works on my end, but thank you for replying and clarifying – this might come up down the road.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 19, 2018 Jun 19, 2018

Copy link to clipboard

Copied

Sure, it is a good replacement, but for other users as well, wanted to add this comment.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Jun 19, 2018 Jun 19, 2018

Copy link to clipboard

Copied

Anyone on mobile without a mouse will still not be able to see the rollover effect, unfortunately. Although this would work well for desktops.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guide ,
Nov 28, 2018 Nov 28, 2018

Copy link to clipboard

Copied

Not to deflate any sails, but this is a good point. 'Rollover' type interactives really should be avoided entirely if the project will be available on a mobile device (phone/tablet). There's really not a huge difference between 'click to show' and 'rollover to show'...so in all our projects that call for such things, we use 'click to show' instead of rollover just to avoid any possible difficulties with mobile devices.

Otherwise, yes, this is a good solution...as long as you can properly time the duration the rollovers stay visible on the screen, as needed

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Nov 29, 2018 Nov 29, 2018

Copy link to clipboard

Copied

I initially used the "click to show" method using advanced actions following the tutorial on Lynda (https://www.bing.com/search?q=replace+rolloevers+html5+captivate&src=IE-TopResult&FORM=IETR02&conver...Using advanced actions to replace rollover images ) but I ran into issues with that. After a few clicks of showing and hiding the captions, it would stop working. Do you know why this is happening? The clickboxes were set to unlimited attempts.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 29, 2018 Nov 29, 2018

Copy link to clipboard

Copied

Can you show a screenshot of the action and settings in the Actions tab? If

this is a responsive project with Fluid Boxes, click boxes cannot be used.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Nov 29, 2018 Nov 29, 2018

Copy link to clipboard

Copied

Our project won't be on mobile or need to be responsive. We MAY transition to that in the future but for the time being, the rollovers using clickboxes are good for now. However, I'd still like to know why the Click to Show method is locking up after a few clicks. Here are the screenshots:

screen_1.pngscreen_2.pngscreen_3.png

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 29, 2018 Nov 29, 2018

Copy link to clipboard

Copied

You are version 9 or older.  New to advanced actions? You seem ot to know the Preview button for an advanced action (first button in the top right control panel of the AA dialog box, looks like an arrow).

Be careful not to use the same name for different items. Not sure about that. Using a multistate object would be a lot easier, as would using 0/1 for the Boolean variables instead of false and true. Similar for the Toggle command which was already available in 9.

Which old version do you use? Full version number, please, as shows under Help, About Captivate.

Here is a blog post, where you find a simple shared action which could be used to toggle the visibility of an item, using multistate objects. Lynda.com has some very outdated tutorials.

http://blog.lilybiri.com/1-action-equals-5-toggle-buttons

Blog was created with CP9.

Why it is not working with your click box? Find it rather dangerous to use a click box for this use case: it has its pausing point at the last frame of its timeline. If that is also the last frame of the slide?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Nov 29, 2018 Nov 29, 2018

Copy link to clipboard

Copied

Haha yes! I'm new to advanced actions as you can see

I have CP 9.0.0.230. Thank you so much for the link and suggestions!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 29, 2018 Nov 29, 2018

Copy link to clipboard

Copied

Please, start by updating your version to 9.0.2. You missed 3 patches. I don't remember the last numbers, have no CP9 anymore.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Nov 29, 2018 Nov 29, 2018

Copy link to clipboard

Copied

Will do, thanks!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Nov 28, 2018 Nov 28, 2018

Copy link to clipboard

Copied

Thank you! Exactly what I needed!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Nov 29, 2018 Nov 29, 2018

Copy link to clipboard

Copied

Thanks! That's a great tip.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Apr 06, 2021 Apr 06, 2021

Copy link to clipboard

Copied

This does not seem to work in Preview mode - is this expected behaviour?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 06, 2021 Apr 06, 2021

Copy link to clipboard

Copied

Are you using Preview as HTML5?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 07, 2021 Apr 07, 2021

Copy link to clipboard

Copied

LATEST

This is an 'old' thread.  Since this version many new possibilities have become possible. Have a look at this blog, where I offered 3 possibilities, some working in Fluid boxes projects:

http://blog.lilybiri.com/swf-to-html-replacing-rollover-caption-slash-image

 

If you are in a non-responsive project (indicated as Blank in the Welcome screen), as Rod points out, the only Preview method showing a good preview of the future output is F11, Preview HTML in Browser. It is recommended to test in multiple browsers, because HTML5 use is not standardized and supported in multiple ways.

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines