0 votes
by (370 points)
Hi again! I'm working with Twine 2.1.3 and Harlowe 2.0.1! I played Cry$tal Warrior Ke$ha! And I really like how Porpentine did with the links. If you ever play it, you'll notice that when your cursor hovers over the links, the links have a sparkly animated background. I was wondering if it's possible to do that with Harlowe 2. I tried downloading the file and upload it on offline Twine, but it won't appear. Is it because it's uses outdated coding?

2 Answers

0 votes
by (6.2k points)

I don't know how you'd have a sparkly background, but I do know how to change the background of a link to a colour. Try this:

(set: $link to 'link')
$link
(mouseover-replace: $link)[(background: red)[(link: 'link')[I am a link.]]]

There's probably a nicer way to do it, but basically, set $link (or whatever you want to call the variable) to what you want to call the link. Then put in the same name when there actually is a name. Example:

(set: $link to 'Eat')
$link
(mouseover-replace: $link)[(background: red)[(link: 'Eat')[You eat the food.]]]

However, this would also make the text inside the link have the red background colour. If you don't want the text to have the background (which you probably don't), use this:

(set: $link to 'link')
$link
(mouseover-replace: $link)[(background: red)[(link: 'link')[(set: $text to 'I am text without a background :)')]]]
(live: 0.01s)[(if: $text is 0)[](else:)[$text]]

What this does is tells it what the text is. However, before you click the link, the variable $text will be 0, so this only displays the variable if there's something to display. Otherwise, you'd just the number 0 sitting at the bottom of your passage. Also, the text wouldn't just appear, because once a passage has loaded it doesn't keep reloading in case there's been a change, so the (live:) macro keeps reloading it every 0.0001 seconds, so it would seem instant to the player.

Again, there's probably a nicer way to do it, because this is the ugliest bit of code I've seen in my life, but it should work. Also, as I said, I don't know how you'd do a sparkly background, so sorry that this isn't really a perfect answer.

+2 votes
by (1.7k points)

Just need to apply some CSS to links on hover. Go to "Edit story stylesheet" in the bottom left toolbar, and then copy this in there.

tw-link:hover, .enchantment-link:hover {
background: url('http://www.addglitter.com/link-sparkle.gif');	
}

This CSS tells Twine: when you're hovering on the link, set the background of the link to this gif. I'd suggest saving and uploading your own sparkly image, so that your layout doesn't fall apart if someone decides to take down the hosted image.

I would also suggest making your font pretty large, because it's hard to see the sparkles when the text is too small. Or maybe you can find a gif with smaller and less obscuring sparkles. Whatever works!

by (6.2k points)
Oh yeah! I use this all the time but I completely forgot about it!
...