Last updated: 25 Apr 20 00:04:57 (UTC)

Foreground image/overlay (Sugarcube 2)

I used this one in Infectious Storytelling because I wanted the frame around the text.

In the Stylesheet:

/* add foreground image (see accompanying Javascript) */
#fgimg {
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 50;
  pointer-events: none;
}

/* add foreground image (see accompanying Javascript) */
#fgimg {
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 50;
  pointer-events: none;
}

In Javascript:

/* add foreground image overlay (see accompanying CSS) */
$('<img id="fgimg" src="overlay.png" >').appendTo(document.body);

/* add foreground image overlay (see accompanying CSS) */
$('<img id="fgimg" src="overlay.png" >').appendTo(document.body);

And actually, since I just wanted it on a certain sequence of passages, I put the Javascript in the passages:

To add it, I put this in the first passage for it to appear:

<<silently>><<script>>$('<img id="fgimg" src="overlay.png" >').appendTo(document.body);<</script>><</silently>>

And then in the first passage it is not present: <<silently>><<script>>$("img").remove("#fgimg");<</script>><</silently>>