Twine Tutorial: Hidden Links
Posted on December 5th, 2013
Prompted by a question from my friend Matthew, here’s a Twine tutorial on how to create hidden links that the reader/player won’t see until they mouse over them. Click here to see what I mean.
JavaScript and HTML
First, you’ll need this snippet of HTML and JavaScript from Glorious Trainwrecks:
<a href=’javascript:void(0)’ class=’internalLink‘ onclick=’state.display(“PassageName“)’>Link Text</a>
Where it says PassageName, use the name of the passage you want to link to. Where it says Link Text, substitute whatever words you want to use as the link.
Now, here’s where the fun starts. Where it says class=”internalLink”, change it to this:
class=”internalLink hidden“
With hidden being the name of the special class you’re going to apply to this link. (You don’t have to name the class “hidden”. I just picked it because it’s convenient.)
CSS: Hiding the Links
Now, create a passage with the tag stylesheet. You can give it any title you like, but it HAS to have that tag. (If you’re unfamiliar with CSS, here’s a nice tutorial on what it is and what it does. For our purposes, using it to change how text appears is the only relevant part.)
Since you want to ensure the passage text and the link text match exactly, it would be a good idea to set the passage text to the color of your choice. The code for that looks like this:
.passage {
color: #ffffff !important;
}
The part that does the work here is the #ffffff. This is the hexadecimal code for the color white, and will give all passages white text. Feel free to change that to any color you like. The .passage part says to apply the style to the passage class, which is built into all Twine templates.
The part that says !important lets the browser know that this styling information overrides anything else, including whatever might be included in the template by default. I put it there just to make sure the text shows up in the chosen color.
Next, you need to do two things to the hidden links: make the links’ default style the same as for passage text, and have something happen to make them stand out when you hover the mouse over them.
This will make your links match the main text:
a.hidden:link {
color: #ffffff !important;
text-decoration: none !important;
font-weight: normal !important;
}
To break it down, a declares that the styling is applied to an anchor (<a></a>) HTML tag. The .hidden declares the special class hidden we’re using to style hidden links. Every link that’s given that class will use this styling. :link says “Apply this styling to links that are just sitting there, not being hovered or clicked on.”
The color: line says what color the link text will be. This MUST match the color in the .passage code.
Text-decoration: none says the text will be plain, not underlined or italicized of whatever, overriding any other style coding for links.
Font-weight: normal removes any bolding from the link. Now, it fits right in with the rest of the passage text.
That’s enough to hide the links.
CSS: Revealing the Links
To help your readers/players along, it’s a good idea to make something happen when they mouse over these links. You do that like this:
a.hidden:hover {
color: #ff0000 !important;
text-decoration: underline !important;
font-weight: bold !important;
}
As before, the a part says this styling goes with the anchor tag. The .hidden says it belongs to the class hidden. The :hover declares “This thing will happen when you hover the mouse over a link with this style.” The stuff in brackets says, “Make the link red, underline it and bold it.” Just like in the example. (If you don’t want to make it bold, just leave out the text-decoration line.)
That’s it! Yay!
So, there you have it: how to create hidden links in a Twine game. If you’d like to check out/play with the example’s source code, it’s here. Any text enclosed in /* */ or written right after // is a comment to help you along and has no effect on how the code itself.
