›

Howdy, Stranger!

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

Sign In Register

Categories

Tinkering with Image Maps

mostly uselessmostly useless
in Help! with 1.x
Hi all!

I'm trying to do cool stuff with image maps, using the method given by TheMadExile here: http://twinery.org/forum/index.php/topic,1589.msg3463.html#msg3463

I want to do a couple more things with Mad's code (well, a bunch more things, but a couple of main ones) but I don't know how. Here's the untouched code:

TheMadExile wrote:

:: StoryInit
<<script>>
$("body #passages").on("click", "area[data-passage]", function () {
state.display(this.getAttribute("data-passage"));
});
<</script>>

:: Start
<html>
<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" data-passage="Begin" title="Next Passage." />
</map>
</p>
</html>


I'd like to know how can I adapt this to pass variables to the target passage? Also, can I use imported images with it?

Thanks for reading.

Comments

  • TheMadExileTheMadExile
    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 uselessmostly useless
    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" />
  • TheMadExileTheMadExile
    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 uselessmostly useless
    That will be all kinds of awesome. Many thanks again!
  • TheMadExileTheMadExile
    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 &lt;area&gt; tag equivalent to that of the &lt;a&gt; tag.

    So, once you grab it, you'll be able to get rid of the &lt;&lt;script&gt;&gt; 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 uselessmostly useless
    This. Is. Awesome.

    ;D ;D ;D

    Thanks!
  • mostly uselessmostly useless
    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.
  • TheMadExileTheMadExile
    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;
    }
Sign In or Register to comment.