How change img.src of picture class

1

Hi
I wish to programatically (javascript) change the src of images in my web pages. I have turned-on Settings Allow HTML element id customisation and have set the name of the associated picture to “image1”.
I can now access the image1 element, but I can’t see how to access the img.src attribute to assign a new URL as picture doesn’t have attributes beyond its ID - as far as I can tell.
Any help appreciated.

2

I believe you need to purchase the Developer tools for doing that.

3

I would be surprised if that is the answer as I think it is an HTML and Javascript issue rather than a Sparkle issue. I can see the picture element with its defined ID within the compiled HTML and can access that element with Javascript, the question is how do you access the scr attribute of that picture element?

4

Hi @JimPitch, you should manage with just the embed block, but as mentioned in other cases, we (Sparkle) can’t really help with coding questions as we are not in the business of teaching to code.

Roughly speaking, you can write some javascript to scan the DOM and go from the picture to the img it contains and from there to the src attribute. You can experiment in the browser console to figure it out.

5

Thanks for the responses. In the end I couldn’t get javascript to replace the src for an img, not sure why, but found a simpler method that replaces the entire innerHTML for the picture element. For future reference here is the simple javascript that does the trick (works with Xojo).

<body onload="changeImage()">
<script>
function changeImage()
{
var url = executeInXojoSync('getImage', 'image1'); //get the url of the new image on disk
var pic = document.getElementById('image1'); //get the picture element that needs replacing
//NB should also check that the pic element is a picture
pic.innerHTML = '<img src='+url+'>'; //simply replace the content with a new img and src
} //end of function
</script>
6

If you wanna change a single element then you need to activate under settings “Allow HTML element id customization” so you can give every element an unique id that can be read via css, javascript, …

7

Yes, that is correct, per the original question posed.