Images as links/ Clickable images

tinymighty

Dear Twine fam,
I am new to this software, but so far it looks incredible.

I want to build a multi narrative, image-based project.
I know with Twine 1 one could import images or create "code" to make an image clickable.
I have been unable to figure it out with Twine 2.

So:
can this be done?
Or is it

Melyanna

Hi!
It is definitely possible to make clickable images.
Could you confirm which format are you planning to use? ie: Harlowe, SugarCube, or Snowman?

greyelf

As stated by @Melyanna when asking a question you need to state the name and full version number of the story format you are using, as answers can be different for each one.

notes: The Adding an Image section of the Twine 2 Guide explains how to use an HTML img element to display an image, this method works in all story formats. The following examples will be accessing an image named arrow-right.png being stored within a media sub-folder relative to the location of the Story HTML file generated via the Publish to File option.

A. Harlowe (both v1.2.3 and v2.0.0)

You can embed an img element within each of different ways to create a link.

[[<img src='media/arrow-right.png'>->Next Passage]]

(link: "<img src='media/arrow-right.png'>")[(go-to: "Next Passage")]
(link-goto: "<img src='media/arrow-right.png'>", "Next Passage")

[<img src='media/arrow-right.png'>]<hook-name|
(click: ?hook-name)[(go-to: "Next Passage")]

B. SugarCube (both v1.0.35 and v2.14.0)

The Markup -> Images section of the 1.x documentation and the 2.x documentation explains how to show an markup-based Image w/ Link.

The HTML Attributes section of the 1.x documentation and the 2.x documentation explains how to do the same using HTML elements.

The <<click>> macro (1.x) and the <<link>> macro (2.x) documentation explains how to do same with a macro-based link instead.

C. Snowman v1.3.0

The story format supports embedding a img element within a mark-up based link as well as using what it calls a functional link, which is an HTML a (anchor) element with a data-passage attribute.

[[<img src='media/arrow-thick-right.png'>|Next Passage]]

<a href="javascript:void(0)" data-passage="Next Passage"><img src="media/arrow-thick-right.png"></a>