Help changing an image using a button

Authoring Twine
1

Twine 2.3.5 and Sugar Cube 2.30.0

Hi, I have this code that allows me to click a button and change the colour of an image using a filter:

<span class="twenty">
	<<button "20">>
	<<script>>
    	$("img#hair").css("filter", "hue-rotate(20deg)");
	<</script>>
	<<set $HairColour = 20>>
	<</button>>
</span>

And I’m trying to do similar but with changing the image source but I can’t find or figure out how to get it to work. This is what I thought would work but does’nt:

<span class="outfit1">
	<<button "Unique School Uniform">>
	<<script>>
    	$("img#outfit").css("src", "Images/dress.png");
	<</script>>
	<<set $Outfit = 1>>
	<</button>>
</span>

Is it actually possible? Any help would be awesome, thanks!

2

You’re not changing style properties, so you don’t use the .css() method. To change attributes on an element you need to use either .attr() or .prop(), depending on exactly what you’re doing.

For example:

$("img#outfit").attr("src", "Images/dress.png");
1 Like
3

Thank you! I tried messing with the .css but didn’t figure that out