Stick an image in a passage (Skip dialog)

Question

Hey !

Since I'm doing a visual novel on Twine (An incredible mess), I configure the passages, but I can't place my icon to pass the dialogs (like in real games).

https://i.imgur.com/t3ge37V.png

It's an little arrow (4 frames gif), and i want to stick it on the passage. She's actually at the end of the sentence, and I want her to stay in the same place.

https://i.imgur.com/lgejNom.png

Here's the code. It's juste a basic markup. I tried to put it in a macro with a left/top position but it doesn't work, I can't combine image/passage/macro.

I'm kind of stuck on that one. Thanks in advance for the answer!

Answer 1

It's hard to answer that question since it depends on a lot of things, such as the HTML code surrounding it and your CSS.

Usually, for things like that, I right-click on the element, choose "Inspect" from the pop-up menu, and then play around with the CSS in the inspector until I figure out how to make the CSS display it the way I want it to.

Hope that helps!

Comments

Thanks ! But it seems doesn't work...

https://i.imgur.com/jglD83x.png

The image is present but is not displayed. And it looks like it displays two of them (Plus the one at the top is not clickable)

 

STORY INIT

if (window.hasOwnProperty("storyFormat")) {
	setup.Path = "Desktop/Tomodomo/image/";  // Twine
	
} else { 
	setup.Path = "image/"; // Desktop
}

PASSAGE

<img style="z-index: 1; position: absolute; left: 760px; top: -426px;" src="image/corey.gif" >

''Gall'' : Omg, how rude man !<br>

<img @src="setup.Path+'arrow.gif'" img style="z-index: 10; position: absolute; left: 10em; top: -17em;">

[img[setup.Path+'arrow.gif'][2]]

I've wrote the code down here. 

I've try to use a script to activate the gif too, but it doesn't work too.

---

That looks like a "broken image link" icon.  So you might want to check the path.

Also, the code you're showing there is what I wrote when I initially misread the question.  As you can see above I have since edited it.

---

OKAY, so, thanks for the help ! I just figured out... I just used a <link> and everything worked like magic.

Here's the code :

<<link '<img style="z-index: 1; position: absolute; left: 760px; top: -426px;" src="image/arrow.gif">' 10>><</link>>

 

The 10 is the name of the passage. And the arrow stick in the right position (Very useful for sticky textbox).