Doing more with hover/mouseover

Comments

• Author X

  March 2015

  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.
• litrouke

  March 2015

  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.
• Author X

  March 2015

  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);
p.removeChild(el);
}


  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
• litrouke

  March 2015

  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?
• Author X

  March 2015

  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.
• litrouke

  March 2015

  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.
• Tovis

  February 2017 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.