Using JavaScript to input images from the resources folder

Using JavaScript with Hype
1

Hi all,

I’ve got a very simply query however I’m very new to using Javascript in Hype.

What I basically want to do is have a button on a hype document and when its clicked change a image holder on the scene to one from the resources folder.

I was also wondering if its possible to click a button on one scene and then change the image within a image holder on a separate scene? So the button would appear on scene 1 (a menu scene for example) and scene 2 would show the corresponding image from clicking the button which will be pulled from the resources folder. Having looked at a bit of how JavaScript works in Hype, I presume it will work by basically linking the button to the UniqueID of the image holder within the document so in theory it shouldn’t matter where the image holder is placed. However, without the code/knowledge to do the first basic task I’m unable to test this theory.

If anyone could help me that would be great,

Thanks,

Chris :slight_smile:

2

First, note that the background image is an animatable property; you can setup a timeline to run that could change the image via keyframes. The easy steps to do this would be:

  1. create a new timeline
  2. Hit record, move the playhead one frame
  3. In the Element Inspector, click Choose… for the background image and select a new one. While it brings up the open/save dialog, if you choose one already in the Resources Library it won’t be duplicated.
  4. Then have some action run that timeline.

Otherwise, if you want to use javascript to change the image, you would first give your element a unique element ID in the Identity inspector, and then when you want run javascript code like:

    var buttonElement = hypeDocument.getElementById("myButtonID");
    hypeDocument.setElementProperty(buttonElement, "background-image", "${resourcesFolderName}/otherImageName.jpg");
1 Like