Twine v2.6.1
Sugarcube v2.36.1
I’m trying to make my dungeon map relative. I use [img[img/img1.png][passage]] to make it clickable and use with <<link>> later.
But I faced a problem. The buttons doesn’t scale. Seems like their position is absolute, and I can’t do a thing with it. When I try to wrap the map or buttons in <div class="relativebox"> it doesn’t help. The same when I try to change scale like <div style="height:50%;">.
I tried to use smaller images and it helped, but I want them to fit any screen, not just mine.
Is there a way to make this images scalable and relative? I need to use images like that to use <<link [img[img/img1.png][passage]]>> with <<replace>>.
For example, thats how it looks:
Thats how I want it to look (fill the screen):
Ah, and the code, but remember I CAN’T USE <img>, because I need them to be clickable and usable with <<link>> <<replace>> later:
<div id="map100prc" style="height:50%;width:50%;">
<span class="cards10">
<<for _y to 0; _y lt $map.length; _y++>>
<<for _x to 0; _x lt $map[_y].length; _x++>>
<span class="cards1map">
<<set _t to State.variables["x"+_x+"y"+_y]>>
<<if _t.type0 gt 0>>
<<if _t.type0 eq 1>>
[img[img/map/0_1.png]]
<<elseif $type0 eq 2>>
[img[img/map/0_2.png][test link 2]]
<</if>>
<<elseif _t.type1 gt 0>>
<<if _t.type1 eq 1>>
[img[img/map/1_1.png]]
<<elseif _t.type1 eq 2>>
[img[img/map/1_2.png]]
<<elseif _t.type1 eq 3>>
[img[img/map/1_3.png][test link 2]]
<</if>>
<<elseif _t.type2 gt 0>>
<<if _t.type2 eq 1>>
[img[img/map/2_1.png][test link 2]]
<<elseif _t.type2 eq 2>>
[img[img/map/2_2.png][test link 2]]
<<elseif _t.type2 eq 3>>
[img[img/map/2_3.png][test link 2]]
<<elseif _t.type2 eq 4>>
[img[img/map/2_4.png][test link 2]]
<</if>>
<<elseif _t.type3 gt 0>>
<<if _t.type3 eq 1>>
[img[img/map/3_1.png][test link 2]]
<<elseif _t.type3 eq 2>>
[img[img/map/3_2.png][test link 2]]
<<elseif _t.type3 eq 3>>
[img[img/map/3_3.png][test link 2]]
<<elseif _t.type3 eq 4>>
[img[img/map/3_4.png][test link 2]]
<<elseif _t.type3 eq 5>>
[img[img/map/3_5.png][test link 2]]
<</if>>
<<elseif _t.type4 gt 0>>
<<if _t.type4 eq 1>>
[img[img/map/4_1.png]]
<<elseif _t.type3 eq 2>>
[img[img/map/4_2.png]]
<</if>>
<</if>>
</span>
<</for>>
<</for>>
</span>
</div>
You can use <img> in a link:
<<link '<img src="URL">' >><<set var>><</link>>
this way, you could add style to specific images.
Otherwise, maybe wrapping the images in a span?
the span?
.cards1map img {
position: relative;
}
2 Likes
I tried span and it didn’t work. I will try again.
I haven’t tried <img> in a link. I will try and give my answer, thanks for a suggestion 
It works 
<<link '<img src="URL">' >><<set var>><</link>>
Code:
<span class="cards10">
<<for _y to 0; _y lt $map.length; _y++>>
<<for _x to 0; _x lt $map[_y].length; _x++>>
<span class="cards1">
<<set _t to State.variables["x"+_x+"y"+_y]>>
<<if _t.type0 gt 0>>
<<if _t.type0 eq 1>>
<img src="img/map/0_1.png" style="position:relative; left:0; top:0 ; width: 100%; height: `100%">
<<elseif $type0 eq 2>>
<<link '<img src="img/map/0_2.png" style="position:relative; left:0; top:0 ; width: 100%; height: `100%">' >>
<<goto "test link 2">>
<</link>>
<</if>>
<<elseif _t.type1 gt 0>>
<<if _t.type1 eq 1>>
<img src="img/map/1_1.png" style="position:relative; left:0; top:0 ; width: 100%; height: `100%">
<<elseif _t.type1 eq 2>>
<img src="img/map/1_2.png" style="position:relative; left:0; top:0 ; width: 100%; height: `100%">
<<elseif _t.type1 eq 3>>
<<link '<img src="img/map/1_3.png" style="position:relative; left:0; top:0 ; width: 100%; height: `100%">' >>
<<goto "test link 2">>
<</link>>
<</if>>
<<elseif _t.type2 gt 0>>
<<if _t.type2 eq 1>>
<<link '<img src="img/map/2_1.png" style="position:relative; left:0; top:0 ; width: 100%; height: `100%">' >>
<<goto "test link 2">>
<</link>>
<<elseif _t.type2 eq 2>>
<<link '<img src="img/map/2_2.png" style="position:relative; left:0; top:0 ; width: 100%; height: `100%">' >>
<<goto "test link 2">>
<</link>>
<<elseif _t.type2 eq 3>>
<<link '<img src="img/map/2_3.png" style="position:relative; left:0; top:0 ; width: 100%; height: `100%">' >>
<<goto "test link 2">>
<</link>>
<<elseif _t.type2 eq 4>>
<<link '<img src="img/map/2_4.png" style="position:relative; left:0; top:0 ; width: 100%; height: `100%">' >>
<<goto "test link 2">>
<</link>>
<</if>>
<<elseif _t.type3 gt 0>>
<<if _t.type3 eq 1>>
<<link '<img src="img/map/3_1.png" style="position:relative; left:0; top:0 ; width: 100%; height: `100%">' >>
<<goto "test link 2">>
<</link>>
<<elseif _t.type3 eq 2>>
<<link '<img src="img/map/3_2.png" style="position:relative; left:0; top:0 ; width: 100%; height: `100%">' >>
<<goto "test link 2">>
<</link>>
<<elseif _t.type3 eq 3>>
<<link '<img src="img/map/3_3.png" style="position:relative; left:0; top:0 ; width: 100%; height: `100%">' >>
<<goto "test link 2">>
<</link>>
<<elseif _t.type3 eq 4>>
<<link '<img src="img/map/3_4.png" style="position:relative; left:0; top:0 ; width: 100%; height: `100%">' >>
<<goto "test link 2">>
<</link>>
<<elseif _t.type3 eq 5>>
<<link '<img src="img/map/3_5.png" style="position:relative; left:0; top:0 ; width: 100%; height: `100%">' >>
<<goto "test link 2">>
<</link>>
<</if>>
<<elseif _t.type4 gt 0>>
<<if _t.type4 eq 1>>
<img src="img/map/4_1.png" style="position:relative; left:0; top:0 ; width: 100%; height: `100%">
<<elseif _t.type3 eq 2>>
<img src="img/map/4_2.png" style="position:relative; left:0; top:0 ; width: 100%; height: `100%">
<</if>>
<</if>>
</span>
<</for>>
<</for>>
</span>
Just need to solve the problem with spacing, I think an empty line adds under the clickable image, and the grid breaks a bit. But I think I will find a way to fix it.
Thanks 
1 Like
