Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
Sidebar Harlowe Twne 2 Images
Hi there,
First time posting here - am wondering how best to include an image in the sidebar of a Harlowe styled Twine game. I want the image to change as the game evolves so putting the image as a background to the sidebar doesn't seem to be a straightforward option!.
Help would be much appreciated
First time posting here - am wondering how best to include an image in the sidebar of a Harlowe styled Twine game. I want the image to change as the game evolves so putting the image as a background to the sidebar doesn't seem to be a straightforward option!.
Help would be much appreciated
Comments
The area that includes the Undo and Redo links is not actually a sidebar, it is the first (automatically generated) section of the current passage that is re-positioned (to the left) using CSS whenever the passage is displayed.
The above is an important distinction because it means that any custom HTML content (elements) added to that area is destroyed whenever the reader traverses to another passage, which in turn means that those custom elements will need to be re-added each time a passage is displayed.
If you are happy with the image appearing as the background of the tw-sidebar element then you could use javascript code similar to that used by the [url="http://"]Basic Harlowe Passage Tag Based Styling[/url] thread, except you would be adding the code to change the CSS class name being added to the html element within the passage you want to change the background image in and you would not be using passage tags.
note: The following examples will use the CSS class names of forest and desert but you will need to use ones that have meaning to your story.
1. Define the CSS styles used to display the different background images within the tw-sidebar element, this CSS needs to be placed within your story's Story Stylesheet area. Your actual CSS may need to include attributes to change the layout / size of the element as well.
html.forest tw-sidebar { background-image: url('forest.jpg'); } html.desert tw-sidebar { background-image: url('desert.jpg'); }2. The Javascript you to add to the passage that causes the first background image to be displayed, in this example that will be the forest image.
<script>$('html').addClass('forest');</script>3. The Javascript you add to the passage that causes the first background image to disappear and the second image to be displayed, in this example that will be the desert image.
<script>$('html').removeClass('forest').addClass('desert');</script>warning: You may of noticed that you need to first remove the forest CSS class name before adding the desert one, if you don't do this it will try to display both background images although only one should actually be visible.An even more simple question: I have put an image link into the twine passage but it is not appearing. The link had worked before and does so in others. Similarly, to apply CSS to images I presume the element "img" is used
The media will not appear/play in either the Test or Play options because they create a memory only copy of your story's HTML, so there is no physical story HTML file for the media to be relative too.
Yes, if you add an image to a passage using an img HTML element then the default CSS selector to use is img, although one alternative you could use is to assign the img element either an id or class property and use that as (part of) the selector instead.