Clickable Image with external link

Hello. Twine 2.3.16 and Sugarcube 2.36.1
I’m trying hard to create img element with external link. I want to use it like promo banner.

I have this solution. But it’s not relative to the page. And I want it to be relative.
[img[img/other/start_cover.jpg][https://www.patreon.com/]]

So I tried to add div with style, but nothing has changed:
<div style=“position:relative; left:0; top:0; width: 100%; height: 100%”>
[img[img/other/start_cover.jpg][https://www.patreon.com/]]
</div>

Maybe there is a way to make img element clickable?
For example, it looks just like I want it to look, but I didn’t find a way to make it clickable.:
<img @src=‘“img/other/start_cover.jpg”’ style=“position:relative; left:0; top:0; width: 100%; height: 100%”>

Your last attempt is close. Just wrap it with the a tag like you would do with a text link. In the img tag you don’t need to use the @ symbol in this case.

<a href="http://www.patreon.com"> <img src="img/other/start_cover.jpg" style="position:relative; left:0; top:0; width: 100%; height: 100%" ></a>

You can also get rid of the “arrow” icon at the end of external links. If you want to this apply to to just one passage, add this to the end of the page

<style>a.link-external::after {display: none}</style>

For the entire game, add this in a stylesheet passage

a.link-external::after {display: none}
2 Likes

Thanks, it works just fine =)

1 Like