Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Two-parter: clicking text changes that text and displays image according to it.

Hello everyone, I am very new in Twineland, sorry for my tötal nōōbity.

I am using Twine 1 with SugarCube 2. I want to make a situation where, when the reader clicks on certain words in the text, it cycles through a number of options that it displays before returning to the initial word. Under the text, it loads a different image each time the word is clicked.


Jim is eating an apple.
Image displayed: Jim eating an apple.

When the user clicks the word 'apple', it changes to banana, then pear, then peach, then apple again. Each click causes a new image to be displayed with Jim eating that type of fruit.

I would very much appreciate any help with this. I have tried doing things with <<click>> and <<if>> statements, but I can't seem to get it right.



  • edited January 2016
    Normally if you want a link that cycles through a list of options when clicked you would use TheMadExile's implementation of the Cyclinglink Macro, a lin to which can be found near the bottom the SugarCube 2 website. Unfortunately you also want an image to change each time the cycling link is clicked and as far as I know that macro does not support change events.

    The following is one way to implement what you want using just built-in macros, it uses two instances of the <<replace>> macro to update two predefined areas of a passage whenever a link is clicked.

    1. Main passage, the passage you want the link and image to appear in:
    <<set $list to ['apple', 'banana', 'pear', 'peach']>>
    <<set $fruit to "">>
    Jim is eating an <span id="fruit-word"><<display "Cycle Fruit">></span>
    <span id="fruit-image"><<print "[img[" + $fruit + ".jpg]]">></span>
    ... the above code defines two variables ($list and $fruit), the $list variable contains the list of fruit to cycle through and the $fruit variable is used by the Cycle Fruit passage to indicate which fruit is currently selected. The above also defines two span elements which will be replaced with the relevant content each time the link is clicked.

    2. Cycle Fruit passage:
    <<set $fruit to $list.shift()>>
    <<set $list.push($fruit)>>
    <<click $fruit>>
    	<<replace "#fruit-word">><<display "Cycle Fruit">><</replace>>
    	<<replace "#fruit-image">><<print "[img[" + $fruit + ".jpg]]">><</replace>>
    ... the above first determines what is the first piece of fruit in the list and then creates a <<click>> link based on that fruit. The link when clicked will first call this passage again and then update the image on the Main passage.

    Both of the above passage assume you are using jpg image files, which are located within the same folder/directory as your story HTML file and that the images files have filenames based on the name of the fruit you want shown in the link.
    If your images are of a different file type, are stored somewhere else, or have more complex filenames then just modify the two <<print>> macros to reflect those differences.
  • Thank you so much, greyelf, for taking the time to help me out. I would have never been able to come up with that. Going to try it right away! Thanks again.
Sign In or Register to comment.