Revision of Twine macro: <<hoverreplace>> and <<mousereplace>> from Sun, 05/12/2013 - 00:37

This set of macros is a mouse-driven counterpart to <<replace>> and are essentially a simpler form of <<hoverrevise>>. They cause a span of passage text to change into a different span when the mouse moves over it. It comes in two main varieties: <<mousereplace>> replaces the span outright when the mouse touches it, whereas <<hoverreplace>> simply displays the alternative span while the mouse is hovering over it, and will change back when it leaves.

For convenience, there are also the following variations:

  1. <<mousecontinue>> functions like the <<continue>> macro, causing a single enclosing span to disappear when the mouse touches it, and revealing all subsequent passage text.
  2. <<mouseremove>> creates text that simply disappears when the mouse touches it.

Script code
http://www.glorioustrainwrecks.com/files/TwineMacros-HoverReplace-1.0.1.txt

CSS code

.hoverreplacement.replacement-in {
	opacity: 0;
}
.hoverreplacement {
	transition: 1s;
	-webkit-transition: 1s;
}
.hoverreplacement.replacement-out {
	opacity:0;
}
.hoverreplacement:not(.gains):not(.mouseremove).replacement-out {
	display:none;
	position:absolute;
}
.mousereplacement.replacement-in {
	opacity: 0;
}
.mousereplacement {
	transition: 1s;
	-webkit-transition: 1s;
}
.mousereplacement.replacement-out {
	opacity:0;
}
.hoverremove .replacement-out {
	opacity:0;
}
.mousereplacement:not(.gains):not(.mouseremove).replacement-out {
	display:none;
	position:absolute;
}

Usage examples:
Separate both versions of the span using <<becomes>>.

  1. <<hoverreplace>>You see here a clock.<<becomes>>It's 8:09PM.<<endhoverreplace>> causes the text "You see here a clock" to become "It's 8:09PM." when the mouse hovers over it, and go back when the mouse leaves.
  2. <<mousereplace>>A [[bird]]!<<becomes>>It flew away.<<endmousereplace>> causes the text to become "It flew away." when the mouse touches it.

The <<mousecontinue>> and <<mouseremove>> variations don't use <<becomes>>:
  1. <<mousecontinue>>Move here to begin.<<endmousecontinue>> hides all further passage text until the mouse touches "Move here to begin.", whereupon those words vanish and the text is revealed.
  2. <<mouseremove>>Don't touch me!<<endmouseremove>> causes "Don't touch me!" to vanish when the mouse touches it.

<<becomes>> vs. <<gains>>
If you use <<gains>> instead, then the second version is appended to the first version.
  1. <<hoverreplace>>[[End game|Quit]]<<gains>> Are you sure??<<endhoverreplace>> adds the words "Are you sure??" after the link while you hover over it.
  2. <<mousereplace>>You see a barrel. <<gains>>It is empty.<<endmousereplace>> adds the words "It is empty." when your mouse touches the words.

Version history:
  1. 12-5-13 - Initial.

Feel free to report any bugs to @webbedspace.

AttachmentSize
TwineMacros-HoverReplace-1.0.1.txt3.54 KB