an image can be a button?

Comments

• feliwebwork

  May 2015 edited May 2015

  are you using Harlowe or SugarCube format?
• greyelf

  May 2015

  If you are using Harlowe:

  [[<img src="images/smile.jpg">|Next Passage]]
  

  
  If you are using SugarCube:

  [img[images/smile.jpg][Second Passage]]
  

  
  note: I am storing my image within an images sub-folder directly below the folder containing my generated (Published) story HTML file.
• feliwebwork

  May 2015

  greyelf wrote: »

  If you are using Harlowe:

  [[<img src="images/smile.jpg">|Next Passage]]
  

  
  If you are using SugarCube:

  [img[images/smile.jpg][Second Passage]]
  

  
  note: I am storing my image within an images sub-folder directly below the folder containing my generated (Published) story HTML file.

  
  brilliant!
  
  Is there any way to get it to work within the (link:)[] macro?
  
  I've tried both:
  

  (link:<img src="images/smile.jpg">)[(goto:"Second Passage")]
  
  (link:"<img src="images/smile.jpg">")[(goto:"Second Passage")]
  

  
  And neither of them work. The appeal of the (link:) macro is being able to add other macros within the [hook].
  
• greyelf

  May 2015 edited May 2015

  @feliwebwork
  There are two different types of quotation marks, single ' and double ".
  
  The issue with your first try is that it has no quotation marks around the link text parameter of your (link:) macro.
  
  The issue with your second try is that you are using the same type of quotation marks to do two things at the same time:
  a. Delimit the src attribute of the <img> element/tag.
  b. Delimit the link text parameter of the (link:) macro.
  
  So you have two options, either escape the quotation marks in point a or change point b to use single quotation marks. I prefer the second option.

  (link: "<img src=\"images/smile.jpg\">")[(goto:"Second Passage")]
  
  (link: '<img src="images/smile.jpg">')[(goto:"Second Passage")]
  
• feliwebwork

  May 2015

  greyelf wrote: »

  you have two options, either escape the quotation marks in point a or change point b to use single quotation marks. I prefer the second option.

  (link: "<img src=\"images/smile.jpg\">")[(goto:"Second Passage")]
  
  (link: '<img src="images/smile.jpg">')[(goto:"Second Passage")]
  

  
  THANKS! I didn't know it was possible to use single quotation marks. Your second example does seem the easier way to remember and keep things clear.
  
  This opens up a lot of possibilities with images as twine links. (my head's spinning now with ideas... so I hope I'll be able to sleep tonight!!)
  
  
• Sharpe

  May 2015

  Yeah, thanks, Greyelf. I didn't think to use single quotes either.
  
  Hope I remember to include this in my beginner tutorial.
• Sage

  May 2015

  @feliwebwork
  Question (yep... I'm new)
  Why is the "link" macro preferred to just doing it as a passage? Is it because you can add other things into the mix? Like setting variables or something?
  
  —Sage.
• feliwebwork

  May 2015

  Sage wrote: »

  @feliwebwork
  Question (yep... I'm new)
  Why is the "link" macro preferred to just doing it as a passage? Is it because you can add other things into the mix? Like setting variables or something?
  
  —Sage.

  
  Exactly. You can put a (set:$yourVariable to "value") and other macros within the (link:)[hook] so that when you click on the image, the code kicks in.
  
  
• spaceranger123

  November 2016 edited November 2016

  Is it possible to use array pluck with click able links?
  For example $Images.pluck ()
  
  http://www.motoslave.net/sugarcube/1/docs/markup.html#images
  
  

  <<click [Img][<img src= $images. ".jpg">][img]
  ON with the story]]>><<script>>/* (code) */<</script>><</click>>
  

  
  ON phone forgive some pseudo code.
  
  in this sugarcube documentation example I don't understand the purpose of $src or $go
  

  [img[home.png][Home]][img[$src][$go]]
  
  
  
• TheMadExile

  November 2016 edited November 2016

  spaceranger123 wrote: »

  Is it possible to use array pluck with click able links?

  Yes. I'd store your image array within the setup object, however, since I doubt they need to be within the story history.
  
  For example, let's assume an image array like the following:

  <<set setup.images to [
  	"anImage.jpg",
  	"anotherImage.jpg",
  	"yetAnother.jpg"
  ]>>
  

  
  
  Now, to pluck a random member from that array for use within a regular image link you'd do something like the following:

  [img[setup.images.pluck()][ON with the story]]
  

  
  Or within a image setter link:

  [img[setup.images.pluck()][ON with the story][$johnny to 5]]
  

  
  Or within a <<click>> you should be able to do something like the following:

  <<click [img[setup.images.pluck()][ON with the story]]>>…<</click>>
  

  Due to a bug, however, using an image markup within a <<click>> does not correctly processs the image source component. Thus, for the moment, you'd have to use the Stupid Print Trick™ to force it. For example:

  <<print '<<click [img[' + setup.images.pluck() + '][ON with the story]]>>…<</click>>'>>
  

  
  
  

  spaceranger123 wrote: »

  in this sugarcube documentation example I don't understand the purpose of $src or $go

  [img[$src][$go]]
  

  They're variables holding values which are being used for the image source and link.
  
• spaceranger123

  November 2016

  Thanks for clearing that up.
  Whats the difference between my object array and yours?

  <<set $images to [ "image1","image2","image3","image4","image5"] >>
   [img[$images.pluck()+ '.jpg'][Home]]
  

  And yours.

  <<set setup.images to [
  	"anImage.jpg",
  	"anotherImage.jpg",
  	"yetAnother.jpg"
  ]>>
  

  Is yours better practice? Allows for more manipulability?
  
  
  Also, so just so Im understanding how it could~ work: $src = images/anImage.jpg ?
  and
  $go = passagename ?
• TheMadExile

  November 2016

  spaceranger123 wrote: »

  Thanks for clearing that up.
  Whats the difference between my object array and yours?

  <<set $images to [ "image1","image2","image3","image4","image5"] >>
   [img[$images.pluck()+ '.jpg'][Home]]
  

  And yours.

  <<set setup.images to [
  	"anImage.jpg",
  	"anotherImage.jpg",
  	"yetAnother.jpg"
  ]>>
  

  Is yours better practice? Allows for more manipulability?

  The primary difference is that yours uses a story variable—thus becoming part of the story history—while mine uses the setup object—thus does not become part of the story history. I'd assumed that this emptying pool of images names wasn't a integral part of your project and thus likely did not need to be part of the history. If you are reusing it in other places and removing image names from it is an important part of that, then it probably would be better to leave it as a story variable. If neither of those are true then, it does not need to be a part of the history nor do you need to use ….pluck()—if you simply want a random member from the array use ….random().
  
  The other difference is that I stored the image names with their file extensions. If you hard code the file extension within the markup, then you cannot later have a mix of image types. By including it with each array member, you can easily use different image types. The same holds true for paths.
  
  

  spaceranger123 wrote: »

  Also, so just so Im understanding how it could~ work: $src = images/anImage.jpg ?
  and
  $go = passagename ?

  More or less. For example:

  <<set
  	$src to "images/anImage.jpg"
  	$go  to "some passage"
  >>\
  [img[$src][$go]]
  

  That said, if you don't need to use a variable—e.g. if the link will always go to the same passage—then you probably should not use one.