Howdy, Stranger!

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

Implementing an image map

edited March 2014 in Help! with 1.x
I was playing around with image maps in Twine and noticed two things when using SugarCube:

1. I had to wrap my code in a html tag, which I though was not required.
If I didn't the page displayed the img and area tags as text.

2. I had to prepend my call to the state.display function with SugarCube or I get a "Error: ReferenceError: state is not defined" message.

Using SugarCane:

::Start
<p id="toptext">Click the image to go to next passage.</p>
<p>
<img id="image" alt="" src="images/doors.jpg" usemap="#doors" />
<map name="doors" id="doors1">
<area shape="rect" alt="" coords="0,0,1000,500" onclick='state.display("Begin")' href="#" title="Next Passage." />
</map>
</p>
Using SugarCube:

::Start
<html>
<p id="toptext">Click the image to go to next passage.</p>
<p>
<img id="image" alt="" src="images/doors.jpg" usemap="#doors" />
<map name="doors" id="doors1">
<area shape="rect" alt="" coords="0,0,1000,500" onclick='SugarCube.state.display("Begin")' href="#" title="Next Passage." />
</map>
</p>
</html>
I'm sure sure it is something I'm doing wrong, but I don't know what it is.

A third thing I noticed, which happens in both Story Formats, is that I have to go backwards twice from the "Begin" passage to get back to the "Start" passage.

I am using the latest GitHub version of Twine and SugarCube 3050

Comments

  • greyelf wrote:

    1. I had to wrap my code in a html tag, which I though was not required.
    If I didn't the page displayed the img and area tags as text.


    It shouldn't be required.  In testing, it displays the image fine for me, but I do see the snafu with <area>.  I'll look into it.


    greyelf wrote:

    2. I had to prepend my call to the state.display function with SugarCube or I get a "Error: ReferenceError: state is not defined" message.
    I'm sure sure it is something I'm doing wrong, but I don't know what it is.


    By using the onclick attribute, your JavaScript snippet is executed outside of the normal execution context of the headers (both SugarCube and the vanilla headers).  The reason you're able to do that at all is because both export several internal references to the outside world.  The vanilla headers simply dump those references on the global window object, while SugarCube puts them on the SugarCube property of the window object to keep its namespace clean.

    I only exported  them in SugarCube for debugging purposes, not so they could be used normally.  This is because that you can't access anything which hasn't been exported.  You're not doing much in this case, only calling display(), which is a method of state, which is exported, but the first time you try to access anything which hasn't been exported you'll get a face full of reference exception (and there's a whole lot more in the unexported category).

    As silly as it seems, I'd suggest doing one of three things: (in either SugarCube or the vanilla headers)
    • Add the <area> tags as you were, but use the StoryInit special passage to add a delegated event handler to the body element to handle the clicks.
    • Add the <area> tags as you were, but use the PassageDone special passage or the postrender task object to add the click event handlers directly to each area element.
    • Create the <area> elements programmatically, either with a small macro or widget (or the vanilla header version of widgets).
    This is so that you can create the event handlers within the proper context.  The first two options both require you to supply the passage name via an attribute so the code will know where to send the player on click.

    Using the first (delegated handler) option as an example (since it's the easiest):

    :: 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>

    greyelf wrote:

    A third thing I noticed, which happens in both Story Formats, is that I have to go backwards twice from the "Begin" passage to get back to the "Start" passage.


    By and large, you should never include both an event handler and an hyperlink reference (i.e. if you're specifying a click event handler, don't also supply an href attribute, or if you do, ensure that your code forces the hyperlink reference to be ignored, but it's simpler to just not do it in the first place).  TL;DR: Remove the href="#" bits.
  • TheMadExile wrote:

    It shouldn't be required.  In testing, it displays the image fine for me, but I do see the snafu with <area>.  I'll look into it.

    The image did not appear for me in Firefox 27.0.1

    TheMadExile wrote:

    By and large, you should never include both an event handler and an hyperlink reference (i.e. if you're specifying a click event handler, don't also supply an href attribute, or if you do, ensure that your code forces the hyperlink reference to be ignored, but it's simpler to just not do it in the first place).  TL;DR: Remove the href="#" bits.


    You would think after all these years I would remember to do that or to add ";return false;" to an in-line onclick handler. Thats the problem with doing Unobtrusive JavaScript, you can forget about the simple things.
  • TheMadExile wrote:

    greyelf wrote:

    1. I had to wrap my code in a html tag, which I though was not required.
    If I didn't the page displayed the img and area tags as text.


    It shouldn't be required.  In testing, it displays the image fine for me, but I do see the snafu with <area>.  I'll look into it.


    Okay.  The htmlTag formatter wasn't setup to allow empty quoted-strings as attribute values, so your alt="" bits were making those tags invalid.  I've updated it to allow that.
  • Thank you
Sign In or Register to comment.