Skip to main content
martian73
martian73
Inspiring
April 23, 2021
Question

Click or hover rollover larger view image on HTML5

  • April 23, 2021
  • 3 replies
  • 1882 views

Hello,

 

I would like to have a large rollover or pop up image when you click or hover over a smaller image. I tried using rollover or slidelet, but it will not allow me to publish it to HTML5. How can I achieve this? I also tried a button action, click to url, but that just opens a new blank page and takes the user away from the captivate presentation.

 

Appreciate any advice. Thanks.

    This topic has been closed for replies.

    3 replies

    Paul Wilson CTDP
    Paul Wilson CTDP
    Community Expert
    April 25, 2021

    Here is a video I did recently on a very similar situation that you might consider for your situation: https://youtu.be/J61qyb0TirE

    Paul Wilson, CTDP
      Lilybiri
      Lilybiri
      Brainiac
      April 24, 2021

      Alternative for the show/hide approach is to use the small image as button which is possible in version 11.5 directly from a bitmap image or a SVG. Then add a custom state to the button which set the Alpha of the original image to 0 andyadd the big image. I wouldn't do it with the rollover state, unless you are sure that your learners will never use a mobile device.

      If you take out the Rollover and Down state, the only command you need for the button is 'Go to Next State' and you have a toggle button: first click will show the big image because the Normal state will be replaced by the custom state, second click will go back to the Normal state. This has one other advantage: if you leave 'Retain state when....' unchecked as is the default, the small image will be visible automatically when returning to the slide.

      It is similar to one of the three workflows to replace a Rollover which I described in this blog post:

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

      It is used a bit differently  for your case, reason why I offered more explanation.

      FYI: you are not able to add an Effect in this case like zooming, which is possible with the Show/Hide workflow explained by Rod.

        martian73
        martian73Author
        Inspiring
        April 26, 2021

        Hi Lilybiri,

         

        Thank you for your reply. Very helpful!!!!

         

        I managed to get the large image to pop up when the user clicks on the small image, on desktops it disappears when the user clicks as it should.

         

        However,  still have 1 issue, question for you...

         

        On the iphone mobile, it shows the larger image when the user touch/clicks on the image, but it does not disappear, even if I click a second time. Any way to have the large (Go To Next State) view disappear automatically or with a second click? What do you suggest?

         

        Thanks again!

         

        martian73
        martian73Author
        Inspiring
        April 27, 2021

        How did you test? You need to upload to a webserver for testing. I don't see any reason why this shouldn't work on a mobile device, if it is triggered by a click/tap. Hover state wouldn't work.

        You can have it automatically disappear after a certain time by adding the Delay Next Actions command, which means you need an advanced or shared action:

           Go to Next state ...

           Delay Next ations by.... x secs

           Go to Next st  ...


        Hi Lilybiri,

         

        I have setup the actions as you instructed. But I would like the large images to appear when the touch/mouse is over the small image and to immediately disappear when the mouse/touch is off the small image. The way I have it setup with the actions you suggest, the large image state stays onscreen. I have tried other ways, usuing the rollover image (which works on the desktop), but not on the mobile.

         

        ANy way to have the large image pop up only when the mouse/touch is on the small image? So that when the uses removes the mouse/touch, their is not a delay for the image to disappear.

         

        Maybe I am not doing the action correct, here is a screenshot of my actions.

         

        Appreciate your help to this point.

        RodWard
        RodWard
        Community Expert
        April 24, 2021

        The Rollover Slidelet object is SWF-based and is therefore not compatible with HTML5 output.

         

        Place your larger image on the same slide as the smaller image and set it's visibility to Not Visible in Output.  This is done via the small 'eye' icon on the image's Property tab.  Here's a screenshot of the same thing for a Shape.

        Next you make your smaller image to work as a button so that when it is clicked it will execute an Action to SHOW the larger image.

         

        For extra credits you need to then decide how you want to HIDE the larger image again.  Do you want it to Hide automatically after X number of seconds?  Or do you want the user to click the larger image to hide itself?  That's up to you.

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