Making a css defined element's (span/div etc) background image a twine link

Authoring Twine
1

Googling made it pretty simple to do with this html, but I’m a little lost at how to accomplish this with Sugarcube/Twine. The element is empty and styled in CSS with background images, so I can’t simply use a normal image passage setter. Basically, I’m wondering how to hook goto and display onto a background image that is generated entirely from CSS styles.

2

If you want to link to an example of what you want, I can take a look at it.

In the meantime, you might also want to check out this part of the SugarCube documentation for ways to set the backgrounds based on the passage’s tags.

3

Right, I’m already using addclass to change the background image of the element depending on my needs and the passage, I’m just wondering if there is a way to turn that background image into a link.

In other words, in the passage the code looks something like

<<addclass "body" "grass">>
<span id="image"></span>

And I’m trying to figure out if there’s a way to use passage links with the image. I guess if there isn’t I can kludge something up with invisible buttons set to be the size of the span, but I was hoping there was something more elegant…

Edit: In case it’s not crystal clear, what I mean I’m trying to do is make the background image clickable, with the click either being a goto or a display.

4

If you want to make an image clickable, then you’re better off using an image map on a non-background image. There are image map generators you could use to help you with getting the coordinates to use for the image (such as this site).

For example, if you had an image of a person, and you wanted to make just his head clickable, you could do something like this:

<<nobr>><map name="headclick" id="headmap">
    <area alt="Head" title="Head" onclick="$.wiki('<<goto [[Passage Name]]>>')" shape="rect" coords="152,10,298,129" />
</map>
<img usemap="#headclick" alt="Person" src="/images/person.jpg" />
<</nobr>>

Now, if you moved your mouse over the “person.jpg” image within the rectangle of coordinates, the user would see the cursor change to a hand pointing and the “title” text “Head” would appear in a tooltip next to the mouse cursor. If you clicked on the head, then it would take you to the “Passage Name” passage.

You can place text and other things over images, so you shouldn’t need for it to be a background image.

Hope that helps! :slight_smile: