JQuery image swap

Using JavaScript with Hype
1

Been using Hype for a few weeks and still a newbie.

I understand that this can be done on the timeline, but I wonder if there is a way to source an image directly from a function, something along the lines of:

$("#image").attr("src", "{resourceFolderName}/image.jpg");

Is it possible to set/find the ID for an img element, as opposed to its enclosing div? (The inner HTML of image divs doesn’t seem to be accessible.)

I’m working on an animation with several image swaps, and would rather code them instead of setting keyframes.

2

Hi sboerner!

I’ve been working along the same lines - swapping out 150+ images in an animation experiment, You can read more about it here.

I bring the image itself into Hype’s animation pane (no placeholder Rect, etc.). Below is an example tag I place in the innerHTML.

<img src="${resourcesFolderName}/smoke_1000.png" width="600" height="400" id="imageSeqHolder">
Note the “id” assigned in the tag.

Then similar to what You wrote:
$("#imageSeqHolder").attr("src","${resourcesFolderName}/"+"smoke_"+imageNum+".png");

I’m using: “+“smoke_”+imageNum+”.png" - in this case because I’m running an animation and that bit of code allows me to run the sequence, so “smoke_1000.png” is then replaced by “smoke_1001.png” etc. in the image tag. Your code should work fine.

3

Thanks, that worked perfectly.

I found that you also need to set the fill style of the enclosing element to “None” after placing it. Otherwise it will contain both the original image plus the new one swapped in by the function.

When the fill style is set to “Image,” the element must contain a hidden img tag.

Still getting my head around how Hype handles innerHTML. Seems like much is hidden from view.

4

Sorry, I forgot to mention that detail... but your solution is better for still frames than the one I would have suggested, which was to use a totally transparent frame as your first image.

5

Hi @sboerner

An image element in Hype is in effect a rectangle element with a styled background-image. If you want to access that image and manipulate it you can use the

element.style.backgroundImage = ...

element being the element calling the function or another set by using the ID getter.

E.g on Mouse click of an element swap it's background image.

element.style.backgroundImage = "url(${resourcesFolderName}/myimage.png)";
6

OK, I see now – thanks for explaining that.