Changing image on hover

Authoring Twine
1

Twine Version: 2.2.1
Story Format: Sugarcube 2.21

I cannot for the life of me figure out how to make an image change on hover. I’ve searched all over but I can’t find anything that I’m either fluent enough in twine to understand or that I’m not too ADHD to skim through.

This is what I have so far for displaying an image and I want to be able to have it change image when it’s hovered over for interesting visuals.

<<set _picPos = "right: -248px; top: -90px;">>\

<img @src="setup.RoomPath+'noon.png'" alt=limper @style="_picPos + 'width: 700px; height: 500px; position: relative;'">\
2 
<<set _picPos = "right: -248px; top: -90px;">>\
<<set _img1 = setup.RoomPath + 'noon.png'>>\
<<set _img2 = setup.RoomPath + 'night.png'>>\

<img @src="_img1" tabindex="0" alt="Limper"
@style="_picPos + 'max-width: 700px; max-height: 500px; position: relative;'"
onmouseover="this.src = SugarCube.State.temporary.img2"
onfocusin="this.src = SugarCube.State.temporary.img2"
onmouseleave="this.src = SugarCube.State.temporary.img1"
onfocusout="this.src = SugarCube.State.temporary.img1">

This allows the code to work on both a desktop and a mobile device, since there is no “hover” on mobile devices, so they can click on the image or click off of it to toggle images.

Also, note that I changed “width” and “height” to “max-width” and “max-height”, since that should preserve the images’ original aspect ratios and avoid squashing or stretching the images.

Please let me know if you have any questions on how any of that works.

Enjoy! :slight_smile: