I know Axure has a built in “Set Image” interaction to change image objects within the project, but I don’t see a native way to change the background image of a dynamic panel.
Is there a quick javascript method to achieve this?
So you need to put an image on the bottom layer to simulate the background image.
I know that is a possibility but the advantage of using the background element (vs. putting an image layer) is that I can dynamically stretch the dynamic panel and the background image will fit/cover the panel no matter the dimensions or aspect ratio.
The alternative method means that images with different dimensions will get disproportionately stretched (without some additional coding) and resizing the dynamic panel will also require additional code to make sure the image stretches with it.
I feel it would be way cleaner to just inject some JS to change the div’s native background element than to effectively rebuild the code and logic to mimic it. Is this possible?
OK，upload your rp file，Let me try。
ImageReplaceJS.rp (1.4 MB)
Thanks so much for taking a look. Here’s a quick example file I stripped down. The top image has a few preconfigured sizes that can be switched between, and some example images to switch to below.
ImageReplaceJS@By Jorkin.rp (1.5 MB)
It may work fine.
2 Likes
Thanks a million - this is exactly what I was looking for.