Skip to main content
lisar47675339
lisar47675339
Known Participant
May 11, 2023
Answered

Display Image and Text on Button Click in Responsive Project

  • May 11, 2023
  • 1 reply
  • 553 views

New to Captivate and have a quick question about displaying images in a responsive project/fluid box. 

I would like the learner to be able to click on a button on the left and for the content in the two fluid boxes on the right to change to match the button...one image and one text. I was able to set up the multistate option and get that working for the text caption, but I am drawing a blank for the images. 
I need it to swap to a new image when they click the button, but I am not able to place the images on the screen on top of each other and hide them because of the fluid box.

So, thoughts? Ideas on a better way to set up this responsive slide to show text and an image on button click? 

This topic has been closed for replies.
Correct answer Lilybiri

Use a multistate object for both image and text, For the button you'll need an advanced action with two commands Change State... 

If you need a situation where no text nor image needs to be visible, use an 'invisible' shape in the Normal state of the multistate objects: a shape with the desired size but with Fill set to 0% and stroke width set to 0.

Indeed you cannot stack images in a normal fluid box, but you can have a multistate object with a different image in each state.

1 reply

Lilybiri
LilybiriCorrect answer
Legend
May 11, 2023

Use a multistate object for both image and text, For the button you'll need an advanced action with two commands Change State... 

If you need a situation where no text nor image needs to be visible, use an 'invisible' shape in the Normal state of the multistate objects: a shape with the desired size but with Fill set to 0% and stroke width set to 0.

Indeed you cannot stack images in a normal fluid box, but you can have a multistate object with a different image in each state.

    lisar47675339
    lisar47675339Author
    Known Participant
    May 11, 2023

    Thank you. I was trying to add the image rather than a shape and then put the image in the shape. That is a little convoluted vs being able to layer images on top of each other, but I was able to get it to work, so thank you! 

    Lilybiri
    Lilybiri
    Legend
    May 12, 2023

    You cannot have stacked objects in states of a multistate object for the same reason as you cannot stack them in any normal fluid box. There are more limitations to responsive projects than this one. For that reason I always recommend to choosing wisely: if you really do not need Portrait and Landscape mode for the learners most of the time, you can avoid all those limitations by using a non-responsive project published to Scalable HTML.

    It is indeed possible to insert an image in a shape. Or instead of a shape use the same image in the Normal state and in the first State, but lower the Alpha of the image in the Normal state to 0, which is possible in the Image editor. 

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