Referencing HTML inside of Hype using Javascript

What is the best way to reference html inside of hype using an internal hype function? I have a script that works fine as regular text html but am trying to convert to hype.

simple example of what I want to do:
html:

<div id = "shapes">
     <img src=""  id="myPicture1" alt="some image">
     </div>

js:

document.getElementById("myPicture1").src = myPix[1];

(myPix is an array of images)

This is a simple example of the kind of thing I am trying to do. I am just having trouble figuring out how to make this kind of thing work in hype. Would the html go in a widget? If so, can I reference its id from a hype function?

Or is this the wrong approach? Should I be using the id assignment inside of hype? I’d prefer to be able to access the html directly if possible.

This is just a workflow question. Once I understand the setup, I can adapt the whole script.

Thanks!
Adam

I am pretty sure if you search the forum you would find an answer. !!

But there are a few ways you can do this.
Using a Rectangle Shape ( which in HTML is a DIV)

1, You can add the Img tag directly into a Rectangle Shape’s inner HTML. and the use similar Javascript to set the src of the img .
2, You can leave the innerHTML blank and use Javascript to set the background image of the Rectangle.
3, You can leave the innerHTML blank and use Javascript to create and append a img tag then set the src.

Here is an example.

But some things to note.

All of these methods work one way or another. But you may have to set width, height and other attributes for some and not others. The example shows this, but you will need to do any of that to suit your needs.

In the example I have put the images within the Hype project. So I use the Hype API to set the path to the resource folder.
i.e : "${resourcesFolderName}/"+myPix[1]

If you have the images outside of Hype then you would use the normal path conventions.
i.e "./images/"+myPix[1]

If you have the Auto optimise on for image and have png files in the Hype project resource folder, they will be changed to .jpg files. So your hard coded extension will need to reflect that.

images.hypetemplate.zip (382.4 KB)

1 Like

Hi Mark,

Thank you! This is exactly what I was looking for. I hadn’t considered using a rectangle - still really new to Hype. I didn’t realize it is just a div. Thanks as well for the info about accessing resources. With this information, I believe I can adapt my script to Hype pretty easily.

Thanks again,
Adam

1 Like

I’m just looking at your example now. I really appreciate the detailed comments!

1 Like