[Sugarcube 2] How can I add a clickable image-map that links to other sections of the story?

Question

I want to add image-maps, images with multiple clickable links that when clicked go to the linked section of my Twine story. The links in the image would be similar to the standard twine links (e.g., [[Go to Room 1->room1]]).

The code I tried was:

<img 
src="test image.jpeg"
alt="" usemap="#example-map-1" class="x" />

<map name="example-map-1">
<area shape="rect" coords="708, 3, 861, 763"
href="" alt="sun" /> 

</map>

which is how you do it in HTML (I tested it and it works there), but Twine appears to have no support for 'href' attributes because there is no url with which to link to another section of the story.

tl;dr Trying to do is get the 'href' in HTML to be a twine-style link to another 'page' of the story. What can I do?

 

EDIT: I tried these bits of code found elsewhere. Now, when I mouse over the specified part of the image it turns into a link (cursor becomes hand), but when clicked does nothing, doesn't go to the specified passage. What's wrong here?

<div style="display: none;">
[[choke->choke]]
</div>

<script>
$('area[alt="sun"]').on("click", function(e){
	e.preventDefault();
	$("tw-link[passage-name='choke']").click();
});
</script>

 

Answer 1

The HTML Attribute subsection of SugarCube's docs has both the information you need and the specific example you want.

In short, you want to use the data-passage attribute.  For example:

<area shape="rect" coords="708,3,861,763" data-passage="choke" alt="sun">

 

PS: All story formats are HTML, rather than XHTML.  You do not need to add a closing slash to self-closing tags.

PPS: tw-link is an element name which is unique to Harlowe.  It's neither used nor supported by other story formats.

Comments

Thank you very much, this worked perfectly! And thanks so much for the tips as well, I found the script snippet on a Harlowe question but had no idea that element was specifically for it.