Changing/hiding images

Hi folks, 

I have a large info graphic with about eight relevant points. I want the learner to click on a section of the graphic and then have a larger version of only that section show to one side so they can see the detail.

Then when they click on the next section/image I want the previously viewed section to go away (or return to the hidden state).

I used triggers and it worked perfectly - a long as the learner reviewed the images in a linear order from top left to bottom right. 

How can I have only the section of the image clicked visible and all the other images hidden? I'm thinking variables might be the neatest way to do it? Otherwise I'm into multiple triggers for each image. 

I did think layers, but while I want to engage the learner, I don't want them focused on closing multiple boxes. 

Thanks in advance for you help.


4 Replies
Veronica Budnikas

Hi Susanne,

I don't think you need to use variables here.

What I would do is make all the objects on the right (the zoomed images) into one object with multiple states. You can start it at Hidden, and then have custom states, e.g. Health Costs, Insulin Costs, 332 Billion, etc.

Then, the hotspot triggers can change the object to the relevant state. 

I need to run now, but I can have a go at your file later on if you like?

Anna Grillo

Hi Susanne,

As is often the case with Storyline, there are so many possible solutions! But, my first thought was in line with yours - to create individual layers for each zoomed-in image. Users won’t have to close any boxes as long as your slide layer properties are set to not hide objects on the base layer and not prevent the user from clicking on the base layer.

See attached for a working example.