It looks like you're new here. If you want to get involved, click one of these buttons!
::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.
Comments
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.
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):
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.
The image did not appear for me in Firefox 27.0.1
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.
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.