It looks like you're new here. If you want to get involved, click one of these buttons!
:: 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>
Comments
You could do something like this:
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 withdata-passage
) There are no issues blocking a new release, so I could put one out soonish (later today, probably). [EDIT] Release published.Not at the moment, no. Although, it should be, yes. Oversight. I'll add that capability in the next release.
data-passage
value, thedata-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>>
inStoryInit
(as it's unnecessary now). You'll have to changedata-set
todata-setter
afterwards, but that's trivial. So, for example, all you'll need is something like this:;D ;D ;D
Thanks!
For example, the base markup might look something like this: And the base CSS might look something like this: