Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Doing more with hover/mouseover

edited March 2015 in Help! with 1.x
Let me start this off by saying that I have zero Javascript fluency, so I don't know how difficult/possible these would be to create. But I was thinking about...

1 a hover/mouseover macro that sends the player to a new passage when their cursor touches a certain word(s). think of it as halfway between the timedgoto macro and an actual clicked choice.

2 a hover/mouseover macro that sets a variable to true/false, according to whether their cursor touched the word or not, even though they didn't commit to a click.

I was thinking of a game sequence where the player has to follow instructions: 'don't touch that' / 'don't move' / 'go touch every capitalized word' etc. But that doesn't really work if I can't penalize or reward the player somehow... Lemme know what you think.

(for any future readers: preferred format is sugarcane)


  • I think I can help with this, as the javascript is simple and I'm figuring out how to make a simple custom macro that does something similar. However, always include the story format that you are using, because the answer will be different for each one (ie sugarcane, sugarcube, jonah). If I'm going to give you a macro you can use, I have to know which story format to test it in.

    The simple answer for the javascript side would be to create a <span> element (or <a> if you want it to look like a regular link) and set the "onmouseover" property of the element to a function. To go to a specific passage, you can use "state.display('title')", where title is the title of the new passage to go to. To set a variable, you can create a custom function to set it, like:
    function setvar(varname,value){
    state.history[0].variables["varname"] = value;
    I got the information about state.history[0].variables from this blog post about Twine variables. If you just set a regular javascript variable "varname" it won't be the same as the Twine variable "$varname". The same blog has a very helpful explanation of how to create a macro, but it does require in-depth javascript knowledge.
  • Thanks for the quick reply! It seemed like it wouldn't be too difficult of a process, but I wasn't certain. Glad to hear it. As for story format, I would most prefer Sugarcane, although Sugarcube would also be alright --- and doing what you suggested with the onmouseover property works perfectly well in Sugarcane!

    I actually read through that blog last night and despaired at my lack of javascript knowledge xD Playing with Twine has taught me some CSS, but I haven't breached the javascript fortress yet. Thanks again for your response. This'll help me do some neat things, I hope.
  • I actually just finished practicing creating a custom macro with your first suggestion.
    try {
    version.extensions['hoverlinkMacro'] = { major:1, minor:0, revision:0 };
    macros['hoverlink'] = macros['hoverspan'] = {
    handler: function(place, macroName, params, parser) {
    if (params[0] == null) {
    throwError(place,"hoverlink macro parameter cannot be null");

    tag = "a";
    if (macroName == "hoverspan"){
    tag = "span";

    title = params[0];
    text = params[1] || params[0];
    console.log("about to insertElement");
    el = insertElement(place,tag,null,"hoverLink",text);
    console.log("after insertElement, about to set onmouseover");
    el.onmouseover = Wikifier.linkFunction(title,el, function(){disableLink(el)});
    console.log("after onmouseover");
    init: function() { },
    } catch(e) {
    throwError(place,"hoverlink Setup Error: "+e.message);

    disableLink = function(el) {
    var i, p, D;
    D = insertElement(null, "span", null, "disabled");
    D.innerHTML = el.innerHTML;
    p = el.parentNode;
    p.insertBefore(D, el.nextSibling);
    This was mostly tested with Jonah, which I'm working with on my project, but it looks like it should work okay with Sugarcane. You can use it as either "don't touch <<hoverlink this>>" or "don't touch <<hoverspan this>>" or "don't touch <<hoverlink "some other passage name" "this">> etc
  • Testing that macro in Sugarcane with Opera as my browser, and I get " (Uncaught exception: ReferenceError: Undefined variable: disableLink)."

    Tried all three verbal variations and ended up with the same error. May I ask how this macro differs from setting the onmouseover property to take the reader to a new passage?
  • Sorry, it looks like somehow while copying the macro definition and the function definition into the same file, I lost part of the macro definition (the "catch" and closing curly brace). I've corrected the code above, so try copying it again.

    Instead of using the state.display() function directly, I used the Wikifier.linkFunction() function, which adds a few conditions (which I confess, I don't completely understand, but I got it from the source code here) so it's closer to what a normal link would do. It also adds a callback function to disable the link once it's been moused over.
  • No, I'm still getting the same errors... 'Cannot convert 'el' to object' and then 'Undefined variable: disableLink'. But I really don't mind doing it the other way! ^___^ So I'm not worried.
  • edited February 2017
    Bumping up this thread to ask if it is possible to do something similar in Sugarcube 2.0. I'm using Twine 2.
Sign In or Register to comment.