Howdy, Stranger!

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

Background Image Clickable?

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

  • What story format and version are you using? Does the background image cover the entire passage?
  • Twine 2.0 Harlowe Version 2.1.1 and yeah the background image covers entire passage.
  • azntyrone wrote: »
    Harlowe Version 2.1.1
    As there is no version 2.1.1 of Harlowe, not even in the project's repository, I will assume you actually meant v2.0.0

    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:
    tw-story[tags~="castle"] {
    	background-image: url('castle-background.jpg');
    	background-size: cover;
    }
    


    azntyrone wrote: »
    Click anywhere on the background image to be sent to the next passage.
    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?
  • edited April 2017
    @greyelf raises some good points for your consideration. I'm going to assume you're using Harlowe 2.0.0. Here's a bit of code to get you started.

    CSS to hide our secret links:
    #next {
      display: none;
     }
    

    The following goes in a footer-tagged passage:
    ::footer [footer]
    {
    (live: 100ms)[
    (if: (passage:)'s  tags contains "bg-click")[
      <span id="next">
        (link: "next")[(goto: $next)]
      </span>]
      (stop:)]
     }
    

    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:
    $(document).on('click', ":not('tw-link tw-sidebar')", function(){
      $('#next tw-link').trigger('click');
     });
    

    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.
  • edited May 2017
    greyelf wrote: »
    azntyrone wrote: »
    Harlowe Version 2.1.1
    As there is no version 2.1.1 of Harlowe, not even in the project's repository, I will assume you actually meant v2.0.0

    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:
    tw-story[tags~="castle"] {
    	background-image: url('castle-background.jpg');
    	background-size: cover;
    }
    


    azntyrone wrote: »
    Click anywhere on the background image to be sent to the next passage.
    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?

    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.
  • edited May 2017
    azntyrone wrote: »
    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.

    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:
    ::starting passage
    <span id="#next">[[passage to go to]]</span>
    

    In the style sheet:
    #next {
      display: none;
     }
    

    In your scripts:
    $(document).on('click', 'html', function(){
      $('#next tw-link').trigger('click');
     });
    

    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:
    [[<img id="start-img" src="url/to/img.jpg" />|passage to go to]]
    

    In your style sheet:
    #start-img {
      position: fixed;
      z-index: 100;
      width: 100%;
      height: auto;
    }
    

    Depending on the shape of your image,
    [...]
      height: 100%;
      width: auto;
    [...]
    
    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.
    azntyrone wrote: »
    I got the code by googling some random stuff.

    Consider changing to something like what greyelf provided. It's not hurting anything, but it is reinventing the wheel.
  • The first method just created a Passage Button for me instead of make the image clickable. The second method made my image disappear/almost entirely cut off :(
    Chapel wrote: »
    azntyrone wrote: »
    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.

    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:
    ::starting passage
    <span id="#next">[[passage to go to]]</span>
    

    In the style sheet:
    #next {
      display: none;
     }
    

    In your scripts:
    $(document).on('click', 'html', function(){
      $('#next tw-link').trigger('click');
     });
    

    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:
    [[<img id="start-img" src="url/to/img.jpg" />|passage to go to]]
    

    In your style sheet:
    #start-img {
      position: fixed;
      z-index: 100;
      width: 100%;
      height: auto;
    }
    

    Depending on the shape of your image,
    [...]
      height: 100%;
      width: auto;
    [...]
    
    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.
    azntyrone wrote: »
    I got the code by googling some random stuff.

    Consider changing to something like what greyelf provided. It's not hurting anything, but it is reinventing the wheel.

  • @azntyrone: Method 1: Remove the # character from the start of the span element's ID.
    <span id="next">[[passage to go to]]</span>
    

    @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.
  • greyelf wrote: »
    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.
  • edited May 2017
    azntyrone wrote: »
    The first method just created a Passage Button for me instead of make the image clickable. The second method made my image disappear/almost entirely cut off :(
    For 1. As greyelf said, it needs to be
    <span id="next">[[passage to go to]]</span>
    

    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:
    #start-img {
        position: fixed;
        z-index: 100;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: auto;
    }
    

    If your image is taller than it is wide,
    #start-img {
        position: fixed;
        z-index: 100;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: auto;
    }
    

    might work better.

    I'll attach some example html files below.
Sign In or Register to comment.