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

Click or hover rollover larger view image on HTML5

Explorer ,
Apr 23, 2021 Apr 23, 2021

Copy link to clipboard

Copied

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.

Views

1.1K

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 23, 2021 Apr 23, 2021

Copy link to clipboard

Copied

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.
VisibleInOutput.png

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.

Votes

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 24, 2021 Apr 24, 2021

Copy link to clipboard

Copied

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.

Votes

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 26, 2021 Apr 26, 2021

Copy link to clipboard

Copied

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!

 

Votes

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 26, 2021 Apr 26, 2021

Copy link to clipboard

Copied

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  ...

Votes

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 26, 2021 Apr 26, 2021

Copy link to clipboard

Copied

I uploaded it to my web host for testing on a live web server.

OK great, I will add the action next to have it disappear. Thanks again.

Votes

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 27, 2021 Apr 27, 2021

Copy link to clipboard

Copied

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.

Votes

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 27, 2021 Apr 27, 2021

Copy link to clipboard

Copied

Do you have only two states as described in the blog post? 

It is either a toggle solution, when you use the small image button both for showing and for closing the large image. Or you use the advanced action, where clicking the small image button will show the large image and it will disappear automatically after 5 seconds. 

Votes

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 27, 2021 Apr 27, 2021

Copy link to clipboard

Copied

Yes, I have watched your tutorials on your blog several times, but I am missing something still as its not working on mobile.

 

Well I removed the extra states. I only have these 2 states, "Normal" and "big_image", attaching the Properties > Action settings on a screenshot.What am I missing still?

 

Advanced actions, 5 second delay doesnt work as we have other small images on the screen we would like to pop up when the mouse is over them.

Votes

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 27, 2021 Apr 27, 2021

Copy link to clipboard

Copied

LATEST

It is either on rollover, or on click. Rollover will never work on mobile, reason why my proposals are for click/tap not for hovering. If you only want it to work on desktop/laptop and only with hovering you'll need either avascript or use the CpExtra widget by InforSemantics which will both allow you to create a mouseover and a mouseout event. Adding the big image to the Rollover state is a workaround, but cannot give you full control over the display time, big image disappears when the rollover state is no longer present/

Conclusion: you have to decide what exactly you want to trigger the big image, either click/tap (for all devices) or hovering (only on desktop/laptop).  

Votes

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 25, 2021 Apr 25, 2021

Copy link to clipboard

Copied

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

Votes

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
Resources
Help resources