Convert Sugarcube variable to html variable?

Tim7549

First, I am absolutely new to Twine, HTML and CSS so I am not sure if I am even asking the right question I am using Twine 2.1.1 and Sugarcube v2.14.0.

I have this code in my Story Stylesheet.

.div2 {
    position: absolute;
    top: 45px;
    left: 100px;
    width: 823px;
    height: 585px;    
    padding: 1px;
    border: 4px  solid peru;
    box-sizing: border-box;
    background-image: url("snowstorm.png");
    Background-color: green;
}

This makes a box with a background image at a fixed point on the passage screen. This seems to be working wonderfully.

I have the following code in a passage.

<div class="div2">

<div style="position:relative; height:25px;">
<img src="picture2.png" width="25" height="25"
style="position:absolute; top:200px; left:200px; width:25px; height:25px; border:none;"
/>
</div>

This works well too and places a small picture on top of the backround image that was set in the stylesheet.

My question is as follows, I can change the position:absolute values for top and left manually in the code and move the small picture created in the passage any place over the background image. I am trying to figure out how to use variables in the place of the manually entered numbers for top and left. I need to take <<set $value = some number>> and use that value as the top or left numbers. Nothing I have tried works.

To better understand I am using the background image set in the stylesheet as a map. I want to use the small image set in the passage as an icon the moves across the map based on the players location. Everything would work well if I could set the position:absolute numbers from the passage variables.

Any help would be greatly appreciated

TheMadExile

Using temporary variables and <<print>>:

<<set _top to '200px', _left to '200px'>>
<<print '<img src="picture2.png" width="25" height="25" style="position:absolute; top:' + _top + 'px; left:' + _left + 'px; width:25px; height:25px; border:none;">'>>

Beyond that, I'd move anything you are not going to be dynamically modifying to a class. Also, you don't need to use both the attributes and CSS properties for for width and height on the image, choose one. For example, a map icon style:

.map-icon {
	position: absolute;
	border: none;
}

And the updated passage markup:

<<set _top to '200px', _left to '200px'>>
<<print '<img src="picture2.png" width="25" height="25" class="map-icon" style="top:' + _top + 'px; left:' + _left + 'px;">'>>

Tim7549

Absolutely perfect !!! Everything is working wonderfully.

Thanks !!!