Skip to main content
Dave Creamer of IDEAS
Community Expert
Dave Creamer of IDEASCommunity Expert
Community Expert
December 5, 2023
Question

Rollover Capion/Image working in HTML5

  • December 5, 2023
  • 1 reply
  • 386 views

For years, I avoided using rollovers due to their Flash-based animation. (I felt that the rollover effect could have been handled with CSS but that feature wasn't updated in Captivate.)

 

Now, in Classic, they work when previewing in HTML5, however, I still get the "not supported" dialog box and they are listed in the HTML5 Tracker panel. 

 

Can anyone explain why? (I searched the forums and google to no avail.)

    This topic has been closed for replies.

    1 reply

    Lilybiri
    Lilybiri
    Legend
    December 5, 2023

    Can you have a look at my blog post about this feature?

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

     

    Dave Creamer of IDEAS
    Community Expert
    Dave Creamer of IDEASCommunity ExpertAuthor
    Community Expert
    December 5, 2023

    Excellent article (as always), but assuming I understood it correctly, it doesn't answer my original question.

     

    I'm wondering why the Classic rollovers work in HTML5 (on a computer) but still give an error like the old SWF versions.

     

    David Creamer: Community Expert (ACI and ACE 1995-2023)
    JJ-Byrne
    JJ-Byrne
    Participant
    December 6, 2023

    The issues you're encountering with rollovers in HTML5 are due to several reasons. Firstly, rollover slidelets, initially designed for SWF (Flash) technology, are incompatible with HTML5. Secondly, while rollover captions or images can work in HTML5, their functionality is limited to hover event devices like laptops and desktops. Hence, they don't work on mobile devices. Furthermore, in Fluid Boxes projects, which are typically aimed at mobile compatibility, the option to insert rollover captions or images is disabled. However, there's a workaround for this limitation. You can use a Click Box with a Hint to simulate a rollover effect. By adjusting the Click Box settings and placing it over the intended area, you can create an effect similar to rollovers that functions appropriately in HTML5, avoiding any issues in the HTML5 tracker.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices