Load an image in an element

Using JavaScript with Hype
1

Hello,

I’m trying to load a jpeg, but i can’t. I’ve tried all these lines.

//$("#cadre").hide(); // OK, the target is alright.
//$("#cadre").attr({“src”:"${resourcesFolderName}/imageClic.jpg"});
//$("#cadre").attr({src:"${resourcesFolderName}/imageClic.jpg"});
//$("#cadre").attr({src:${resourcesFolderName}+"/imageClic.jpg"});
//$("#cadre").attr({src:"${resourcesFolderName}/imageClic.jpg"});
//$("#cadre").attr(src,"${resourcesFolderName}/imageClic.jpg");
//$("#cadre").attr(“src”,"${resourcesFolderName}/imageClic.jpg");

I also tried the css() method.

2

you did include jquery, right? Just asking since you are using jquery syntax.

3

$("#cadre).attr("src", "${resourcesFolderName}/imageClic.jpg");

should work … which has been your last choice.
if it does not and both the element and the jpg exist your element is not of kind img … or yes of course: you didn’t load jquery

4

Thank a lot you for your answer. Yes i did because the first line is OK.

5

Thanks a lot for your answer.
When i insert a image, i got an element which is a simple div and not an img because the background color is not a color but an image. How to import an image and to get an image ?

David

6

I’ve juste tried…

$("#cadre").css(“background-image”,"${resourcesFolderName}/imageNormale.jpg");
$("#cadre").css({backgroundImage:"${resourcesFolderName}/imageNormale.jpg"});

but :frowning:

7

Tu help you to understand, i’ve just inserted this too (and it’s alright) in a HTML widget.

<img src="${resourcesFolderName}/imageClic.jpg" width=160 height=160>

It’ works. But if i add the script, it does’nt work.

8

hard to follow on what you are doing.
are you trying to assign a backgroundimage to a widget¿ this does not work …
otherwise the console may give a good hint … just have a look for the error messages

9

Sorry. I’m just trying to load an image on a click.

10

Have you considered using a built-in Hype approach instead of code?

You can have the click run a timeline, and that timeline can have keyframes which change the image. The background image is an animatable property - you can hit record, advance the playhead, then use the ‘choose’ button in the background inspector item to have a new keyframe be inserted.

Otherwise, a few issues would be that if you’re doing this from a HTML Widget, you should know that these are iframes, and cannot be communicated to in the same way that you would a regular element. If you need programmatic control to arbitrary HTML, it is much easier to start with a Rectangle element modify via ‘Edit > Edit Element’s Inner HTML’.