Change CSS of some element at runtime and change image at runtime using javascript functions.

Report · Mar 14, 2022

We have create a course using Captivate. Now we want to change CSS of some elements like header panel, footer and banner at run time. How can we do that.

Also, can we replace any image from course HTML with any other image at runtime using javascript?

We were able to find functions like

cp.hide("ss1");

cp.show("ss2");

cp.changeState("","");

Where can we find complete list of all javascript functions provided in Captivate module.

Report · Mar 14, 2022

Complete list...?

Not sure one exists but here are a couple resources to help you with a few more.

You can use JavaScript to swap out images but you will likely need to tie that to an event of some kind like clicking a button.

The changeState command would be a good one for that.

https://elearning.adobe.com/2021/09/javascript-workshop-get-started-with-javascript-in-elearning-by-...

https://elearning.adobe.com/2019/09/getting-started-javascript-adobe-captivate/

Report · Mar 14, 2022

Thanks fot the links but they cover very basic functions.

I am looking for advanced function which can be used to change CSS of object or replace an image from web.

Report · Mar 14, 2022

You can change some CSS properties if you use the name of the object but this process can have undesired results depending on your object.

Here is a small example of changing the background color of a smartShape.

For the box - all seems great, until you try to do the same with a circle. You see it does the whole container, not just the shape. Perhaps there is a way - But I am not familiar with it at this time.

I cannot say that I have tried swapping out an image placed out on the web somewhere with JavaScript from within Captivate but my recommendation would be to place your images within Captivate. That way you can swap them out pretty easily with JavaScript and you won't have to worry about potential URL problems.