Tinkering with Image Maps

Comments

• TheMadExile

  May 2014

  mostly wrote:

  
  I'd like to know how can I adapt this to pass variables to the target passage?
  

  
  
  You could do something like this:

  
:: StoryInit
<<script>>
$("body #passages").on("click", "area[data-passage]", function () {
if (this.hasAttribute("data-set"))
{
macros.eval(Wikifier.parse(this.getAttribute("data-set")), null, null);
}
state.display(this.getAttribute("data-passage"));
});
<</script>>

:: Start
<p id="toptext">Click the image to go to next passage.</p>
<p>
<img id="image" src="images/doors.jpg" usemap="#doors" />
<map name="doors" id="doors1">
<area shape="rect" coords="0,0,1000,500" title="Next Passage." data-passage="Begin" data-set="$foo to true" />
</map>
</p>


  
  

  mostly wrote:

  
  Also, can I use imported images with it?
  

  
  
  Yes, although it's more difficult than it could be at the moment.  I'd suggest waiting for the next SugarCube release, which will contain the <img> tag syntax extensions.  The extensions will make doing something like this possible: (essentially, replace the <img> tag's src attribute from the above example with data-passage)

  
<img id="image" data-passage="ImageMapPassage" usemap="#doors" />


  There are no issues blocking a new release, so I could put one out soonish (later today, probably).  [EDIT] Release published.
• mostly useless

  May 2014

  That's awesome! Thanks for pushing out the new build, I really appreciate it! Another question: is it possible to set the imported image's name from a variable? Something like this:

  <img id="image" data-passage="$foo" usemap="#doors" />
• TheMadExile

  May 2014

  mostly wrote:

  
  Another question: is it possible to set the imported image's name from a variable? Something like this:

  <img id="image" data-passage="$foo" usemap="#doors" />

  
  
  Not at the moment, no.  Although, it should be, yes.  Oversight.  I'll add that capability in the next release.
  
• mostly useless

  May 2014

  That will be all kinds of awesome. Many thanks again!
• TheMadExile

  May 2014

  The latest SugarCube release adds support for: using a $variable for the data-passage value, the data-setter attribute (which does pretty much what it says on the tin), and adds processing to the <area> tag equivalent to that of the <a> tag.
  
  So, once you grab it, you'll be able to get rid of the <<script>> in StoryInit (as it's unnecessary now).  You'll have to change data-set to data-setter afterwards, but that's trivial.  So, for example, all you'll need is something like this:

  
:: Start
<p id="toptext">Click the image to go to next passage.</p>
<p>
<img id="image" data-passage="$position" usemap="#doors" />
<map name="doors" id="doors1">
<area shape="rect" coords="0,0,1000,500" title="Next Passage." data-passage="Begin" data-setter="$foo to true" />
</map>
</p>

• mostly useless

  May 2014

  This. Is. Awesome.
  
  ;D ;D ;D
  
  Thanks!
• mostly useless

  May 2014

  This isn't directly related to the above, but it will be pretty useful in this context. What would be the simplest way of overlaying another image at a specific coordinate of my map image? Google turns up a bunch of methods, but I'm not sure which would work best here/in Twine.
• TheMadExile

  May 2014

  Probably by wrapping the map image and the other images (let's call them tokens) in a container.  Then you'd need some CSS that absolutely positions the tokens to whatever x/y coordinates you need and sets their z-index so that they're positioned above the map image (you probably wouldn't need to set the z-index in most cases, but better safe than sorry).
  
  For example, the base markup might look something like this:

  
:: Start
<<nobr>>
<div id="map-container">
<img id="map-image" data-passage="$position" usemap="#doors" />
<img id="token-a" data-passage="$tokenA" />
<img id="token-b" data-passage="$tokenB" />
</div>
<map name="doors" id="doors1">
<area shape="rect" coords="0,0,1000,500" title="Next Passage." data-passage="Begin" data-setter="$foo to true" />
</map>
<</nobr>>


  And the base CSS might look something like this:

  
:: Image Map Styles [stylesheet]
#map-container { position: relative; }
#map-image { z-index: 0; }
#map-container [id|="token"] { position: absolute; z-index: 10; }
#token-a
{
left: 25px;
top: 250px;
}
#token-b
{
left: 25px;
top: 250px;
}