Twine 2.0 Harlowe Version 2.1.1
Is it possible to have a background image clickable? I have the code set up in my Story Stylesheet and the background image works fine. I'm also inserting
<script>$('body').removeClass().addClass('castle')</script>
into passages I want the background image to be in.
Example: Background image is a tree. Click anywhere on the background image to be sent to the next passage.
Comments
Is there as reason why you are using jQuery to change the body element's class instead of just using Twine's built in Passage Tag system which Harlowe v2.0.0 supports.
eg. Assign a passage tag of castle to the specific passages then use a CSS selector based on that tag, something like the following:
Including clicking on the area containing the passage text?
If so, is that passage text going to contain markup links?
And if there are markup links do you want those links to be select-able?
CSS to hide our secret links:
The following goes in a footer-tagged passage:
The (live:) macro will prevent it from skipping passages, which is a problem I wound up having while testing this; the 'click' would carry me forward a few passages if there were several in a row that had the tag 'bg-click'. Speaking of which, the invisible link is only included in passages tagged 'bg-click', so on all other passages, clicking the background will do nothing.
The variable $next should be set in the passage's main body somewhere, or in a preceding passage, and will tell us which passage to go to when the background is clicked.
In your JavaScript:
The ":not(...)" selector identifies which parts of the document's body should not forward the user to the $next passage when clicked. I have it set so that clicks on the links in the text and clicks in the sidebar will not forward the user to $next. If you want everything on the page--links, sidebar, etc to take the user to $next, then change ":not('tw-link tw-sidebar')" to "html" or "tw-story".
While the method I'm using here 'works,' please note that the background image has nothing to do with any of this, so while I think it simulates what you want pretty closely, it doesn't actually do what you want. Additionally, having most of the page be clickable like this can be difficult/frustrating on your users. Maybe consider another approach--maybe something like making the background click actually be a double click.
I got the code by googling some random stuff. The background image is an image I created in Photoshop. It has the word "PLAY" on the picture but I don't want to try and figure out how to make that specific section on the picture to be clickable.
There's not going to be any passage text. I essentially just want players to click on the image to take them to the next passage.
I didn't realize this was a one-off thing. Ignore my earlier post.
You can't really make only the background image clickable. You can do some other stuff though.
Method 1. If you just want the player to click anywhere to start the game, just use this code:
In the style sheet:
In your scripts:
Method 2. Instead of using a background image, you could just set up the image to display in your passage as a link, and then make it fill the whole page using CSS:
In your style sheet:
Depending on the shape of your image, might be better.
I wasn't actually able to test any of this code (shame on me) because I can't get Twine 2 to work for me right now, so I may have made some mistakes. I'll test it out when I can.
Consider changing to something like what greyelf provided. It's not hurting anything, but it is reinventing the wheel.
@Chapel: It is very easy to mistype when creating examples from memory, which is why I almost always run them in Twine first before cut-n-pasting them as is into a comment.
My apologies. As I mentioned in the post, I couldn't get twine 2 running so I didn't test anything; i probably should've just held off on posting.
Anyway, I forgot all about this, so I'd better run and fine tune this code now and make sure that's the only problem.
Thanks, greyelf.
In your starting passage. That "#next" messed it up. Sorry about that.
For 2. I'm just an idiot, I didn't really place the image anywhere. Try this out instead of the CSS I gave:
If your image is taller than it is wide,
might work better.
I'll attach some example html files below.