Bring image to front in javascript Cap8

[petern33480613]

Hello,

I have three images A, B and C stacked on top of each other.

I have three click boxes, clickA, clickB, clickC on the same slide as the images.

When any of the three click boxes is clicked I need the corresponding image to move to the top of the stack.

Is this possible in javascript inside Captivate 8 ?

The project will be published in HTML5.

Thank you.

Peter.

Cardiff, Wales, UK. Overcast and muggy with a chance of rain.

[Gray Susan]

Why not hide the images and have them appear when the appropriate click box is selected? You can do that within Captivate without messing with JS.

[Lilybiri]

Susan, some users simply want to use JS, I have learned not to answer that this is so simple with shared actions! Each user has his preferences, lot do not trust advanced/shared actions although they are converted to JS on runtime.

Blog after Posterous? - ClickClick - Captivate blog

[petern33480613]

Lilybiri,

Some users do not want to use JavaScript, but have to consider it as a last resort.

Some users just can't see how Advanced / Shared actions can be made to work without having to define a variable for each of my images.

And as I will have a couple of hundred images in the project I really don't want to spend my life defining variables.

My thought of stacking the images would mean I could just bring the required image to the top, and add or remove images from the stack without having to add and delete various variables.

If I am barking up the wrong tree please point me in the right direction.

I only post a question on here when I have tried and tried and tried to find a solution by myself, and I turn to this forum as a last resort, not as an easy way to get other people to do my work.

Thank you

Peter

[Lilybiri]

Why do you have to define variables if you just want to hide, show images? I don't understand that at all. I never used variables for that kind of simple work flows.

Go ahead with JS, that can be a personal choice if you like coding. I'm using it only if I really need arrays/functions or want to exchange variables between Edge Animate and Captivate. I will not use it for the kind of situation you described, maybe that was not a typical case, in that case I apologize. Indeed, I will only go to JS if it is becoming too cumbersome with actions. They are a lot more powerful than most people think. That is why I started blogging about them. Same sort now for Shared actions, that need a bit different approach and are ignored by most books and trainers although they are around since 2 years. Wished I could offer some more training...

[petern33480613]

Gray Susan / Lilybiri.

I'm happy to use any technique.

I did have a look at Hide / Show, but presumed that for each click I would have to ensure any image being shown then became hidden.

So for imageA I would need to say something like:

SHOW imageA

HIDE imageB

HIDE imageC

and then for imageB I would need to say something like:

HIDE imageA

SHOW imageB

HIDE imageC

and imageC

HIDE imageA

HIDE imageB

SHOW imageC

In writing the original question I tried to keep it as simple as possible, in reality there will be more than 3 images, potentially 20.

I did look at Shared Actions, but really for the life of me I could not figure out how they work, and I have spent a lot of time messing about with them.

Any help would be appreciated.

Thank you

Peter

[Lilybiri · Accepted solution]

Group the 3 images, will label the group Gr_Image.

Each click box now needs an action with two statements (commands):

• Hide Gr_Image
• Show ImageA

Create a shared action, will have two parameters: the first will in this case always be the group Gr_Image, the second will be the image.

Apply this shared action to each of the click boxes, first parameter is always the group, second the specific image.

Here are some articles I wrote about shared actions (I'm busy with a cookbook about actions):

Dare to Share - part 1 - Captivate blog

Dare to Share - part 2 - Captivate blog

Parameters in Shared Actions - Captivate 7 vs. 8 - Captivate blog

Reuse Shared Actions in other Projects - Captivate 7 vs. 8 - Captivate blog

[petern33480613]

Lilybiri,

Ah.. I see, the trick is to GROUP the images.

A simple solution, and obvious when explained.

I will be back at my desk in the morning grouping images all over the place

Thank you. !

regards

peter

[Lilybiri]

About grouping,  three years ago I created this old video:

Advanced Actions in Captivate 6 - YouTube

There I explain the big importance of grouping, another hidden gem of Captivate that you'll almost never see used in videos.

If you had read my blog, you should have seen a lot of grouping everywhere.