Add multiple 'markers' on a jpg with css

Authoring Twine
1

I’ve fallen down a mini-game rabbit hole in my IF story where the player throws darts (denoted by a Green :x: emoji) at jpg of a dartboard. The macro (random:) determines the success. The number mechanics are all working fine in Harlowe I just can’t quite get the CSS display. I’ve got the following from similar examples on stack overflow

CSS:

 .imgDart {
   position: relative;
   display: inline-block;
}

.imgDart:after {
   color:green;
   content: "❌"; 
   position: absolute; 
   left: 225px;
   top: 125px;
}

HTML

<span class="imgDart"><img src="images/Dartboard.jpg"/></span>

This is fine for one dart. But I can’t work out to position multiple ‘darts’ appearing one by one. The emoji is also still red.

Many thanks to anyone that can give me a steer so I can get back the Main Game.

2

Yeah, pseudo-elements only give you two (::before and ::after). If you want more than two, you may want to create <span>/<div> elements for those:

<span class="imgDart">
  <img src="images/Dartboard.jpg"/>
  <span class="dart first-dart">❌</span>
  <span class="dart second-dart">❌</span>
  <span class="dart third-dart">❌</span>
</span>

and in your CSS something like:

 .imgDart {
   position: relative;
   display: inline-block;
}

.dart {
   color: green;
   position: absolute; 
} 

.first-dart {
   left: 225px;
   top: 125px;
}
.second-dart {
   left: 135px;
   top: 500px;
}
.third-dart {
   left: 75px;
   top: 225px;
}

If you want to add a fade-in, you can use Harlowe’s transition macro:

(transition:"fade") + (transition-delay:1s) + (transition-time: 6s)[ <span></span> ]

(or a pure CSS animation that changes the opacity of the element).

This is because an emoji is not a regular character. You might want to use X, a Unicode Character (like those) or an icon font that emulates the emoji (like FontAwesome). Then the css color:green will work.
Another way is to mess with the filter CSS rule (you can change the hue with it).

1 Like
3

Perfect! Thank you so much. That’s saved me so much time :slight_smile: