the problem of the costume changing system

[MAiJiu]

Hello everyone, I am the first to come into contact with this software and have just registered on this platform. The text is translated by my computer. If it’s strange, please don’t mind.
I am using sugarcube2 modes. There was a serious problem when I was trying to change the outfit for the villain - the changed pictures couldn’t be saved and continued. This makes me very nervous.

I set up an area in the sidebar (Story Caption) and used CSS to overlap these images together. By replacing each image, achieve free replacement.
Below is my HTML text and CSS code

Then I set a buttonand used thetag to set a function that can successfully replace one of the images. It’s already great now. My little matchmaker is now free to change clothes.

Then when I return or enter the next message, the replaced images disappear and become bare, but I want them to stay.

So I really want to know how to permanently save images based on this, and keep them unchanged as the story develops. Please, everyone If it really doesn’t work, please also tell me other feasible replacement codes, I really need them.Thank you so much！

[The_Pixie]

I have had a go at doing something similar, but it was a few years ago now. Hmm, and it looks like I failed to copy it across from my old computer, which is annoying.

As far as I remember, I had every image there in the HTML, but turned the visibility on and off. So I saved say a “costume” variable, which is a number. When the page loads, go though each image and turn them all invisible except number 4.

The JavaScript might look like this (if sugarCube has JQuery?), where the layer to show is n:

for (const i; i < costume_count; i++) $('#costume' + i).css('visibility', i === n ? 'visible' : 'hidden')

Each costume has in ID of costume0, costume1, etc. And costume_count has to be set to the number of them.

If I get a chance, and no one else has better ideas, I will take a look on the old harddrive and see if I can find more.