Display image with click or button

Mesz

Hello,
First a quick big thx to all the members who ask and answer here, the forum is a real gold mine. Just started twine a short week ago and i and found so much useful informations thanks to all of you. Among all, big thx to GreyElf and TheMadExile.

As i said, i only started a week ago with 0 knowledge in code or whatever, i managed to learn a lot and found myself or with the help of the forum answers/twine documentation, solutions to most of my problems.
But i'm stuck on something simple.


Ok, so now here is my question:
I want an hidden image (image link) inside a passage to be displayed when the player press a "show" button.
(Note; i'm on sugarcube)

I will this illustrate with a exemple:
I have a passage with text, at some point in this passage, the player meet a character, who give him a map of the place (as an image).
At this moment i want to make a button for the player, so he can "display" the map (the image).

why not making the image link directly visible in the passage ? I don't want the player, when he open the passage to spoil himself, and see the map below before i'm sure he have fully read the text before.

What i already tried;
In the main passage:

-I made a <<button "show">> <img src="image-link.jpg"> <</button>> doesn't work, same with <<click>><</click>>

-I made a <<button "show">> [img[image-link.jpg]] <</button>> doesn't work

-I made a <<button "show">> <<display PassageImage>> <</button>>
Where PassageImage is a second passage with written in it : <img src="image-link.jpg">
But, display work with text and macros, but don't show the image either, so it doesn't work.

-I made a a the start of the passage a <<set $visible to 0>> where the variable $visible work as an on/off value 1 for on, 0 for off.
Then:
<<button "show">> <<set $visible to 1>> <</button>>
<<if $visible is 1>> <img src="image-link.jpg"> <<endif>> and still doesn't work. As i understand this method, twine just read from top to bottom then stop, if i press the "show" button it only execute that part of the macro and not the <<if>> so it won't update its statut.

-I fell on a post in the forum i can't seem to find again, with someone mentioning a "span id box" or something as an alternative to display an image, but i'm still at level 0 with css (only thing i know how to use is the <span class="colorid">
to change font color).

And i'm here..., if anyone have any (simple) idea to solve my problem.

Thank you, and sorry for my english

TheMadExile

You didn't say which version of SugarCube.

Mesz wrote: »

-I made a <<button "show">> <img src="image-link.jpg"> <</button>> doesn't work, same with <<click>><</click>>

-I made a <<button "show">> [img[image-link.jpg]] <</button>> doesn't work

-I made a <<button "show">> <<display PassageImage>> <</button>>
Where PassageImage is a second passage with written in it : <img src="image-link.jpg">
But, display work with text and macros, but don't show the image either, so it doesn't work.

Those didn't do what you wanted because that's not how the <<click>>/<<button>> macros work. They only execute their contents silently when the link/button is clicked. Simply putting content inside them does nothing useful. Their contents should modify state in some fashion (either the state of game/story or the page/DOM).

Mesz wrote: »

-I made a a the start of the passage a <<set $visible to 0>> where the variable $visible work as an on/off value 1 for on, 0 for off.
Then:
<<button "show">> <<set $visible to 1>> <</button>>
<<if $visible is 1>> <img src="image-link.jpg"> <<endif>> and still doesn't work. As i understand this method, twine just read from top to bottom then stop, if i press the "show" button it only execute that part of the macro and not the <<if>> so it won't update its statut.

The reason that doesn't work is because by the time the player clicks the button the passage has already been rendered, which includes executing the <<if>> macro. Simply having the <<button>> change the state of $visible to 1 via <<set>> (which it does do when clicked), does not cause the passage (or page) to be refreshed.


Regardless, to display the image in-passage upon clicking a link or button, you're going to need to do something like the following (there are a few ways you can do this, this is a simple one):

Blah, blah, blah.

Here's a <<click "map for you">><<replace "#map">>[img[image-link.jpg]]<</replace>><</click>>.
<div id="map"></div>

That will replace the contents of the element with the ID map with the content you specify within the <<replace>> (your map image, in this case). I used <<click>> for this example, but it and <<button>> are interchangeable (the only difference is that the former creates a link and the latter a button), so use whichever you prefer.

Also, since this is being done within the page/DOM, if you'll need to show more than one image within a single passage, you'll have to use a unique ID for each.

You could also show the image within a dialog, but that's a bit more advanced.

Mesz

Got it, its perfect and easy to use,
Thank you for your precise answer and explanations.