Setting a variable on hover

Authoring Twine
1

I’m trying to set some variables when a player hovers over an image. The variable will contain the path to the image, and then be displayed at a larger size with CSS by switching on the visible property. I have everything in place to make this happen, just need to set the variable. I know it would be easy to do through a link but for ease of use I’d really like for it to be done on hover. Guessing Jquery might be needed but not sure how to go about it. Thanks.

Twine Version: 2.315
Sugarcube: 2.34

1 Like
2

What do you mean by ease of use? Generally it’s easier for people to access/click on links than use a hover.

If the only feature of the variable is “display this image at a larger size on hover” you shouldn’t even need a variable or jquery/js. Normal css :hover should work.

3

My bad I over simplified what I was planning to do. Basically I want to grab some properties off the hovered object and display them like name, larger pic, description. I don’t want to write the same code over and over customized for each object on the screen though, so was planning to use a one size fits all widget that could be reused anytime someone hovered on an object.

4

you can do that also with css and use an html class to apply the effect to anything with the class.

I’m not knowledgeable of how to do this with jquery so I’ll let others reply with that option, but it need not be that complex.

5

You have left at least one important detail out of your question, and that is the code/technique you are using to display an image. I will assume you’re doing something simple like using a HTML <img> element inside the contents of a Passage.
eg.

You enter the Library and see a <img id="dusty-tome" src="images/dusty-tome.jpg">

As you want to execute code when an element’s state is changed to hover you will need to use JavaScript to assign an Event Handler to that element, that listens for & reacts to that situation.

The following shows how to use the <<done>> and <<run>> macros from within the same Passage to execute a jQuery on() function call that assigns a mouseenter Event Handler to the above <img> element.

<<done>>
	<<run $('#dusty-tome').on('mouseenter', function(ev) {
		/* do something */
	}) >>
<</done>>

…so the question now becomes what to do inside that event handler?

The handler gets passed an Event object that includes a target property that references the HTML element the event was triggered on, in this specific use-case that is the <img> element. So that allows you to gain access to that element’s src attribute.

I used the <<run>> macro to attach the handler because it supports referencing Story & Temporary variables directly within the JavaScript code it is being used to execute. This allows JavaScript code like the following to be executed…

<img id="dusty-tome" src="images/dusty-tome.jpg">

<<set $path to "">>

<<done>>
	<<run $('#dusty-tome').on('mouseenter', function(ev) {
		$path = ev.target.src;
	}) >>
<</done>>

WARNING: The above examples include no error catching or handling code, and there are many things that could go wrong, so I strongly suggest you add such code yourself.

1 Like
6

Hi Greyelf, I get a
macro <<done>> does not exist
I think my Sugarcube version 2.34.1 is before that macro was implemented. I’m not sure if upgrading will break things or not.
Is there still a way to do it?

7

Upgrading shouldn’t break anything. I updated to 2.36 for my old game and everything went fine. (If you really don’t want to you can change that <<done>> to a <<timed 0s>>, but I really recommend upgrading.)