Is there a data-passage equivalent in Harlowe?

mikawa

I want to create an imagemap with links to new passages, so I have to do the passage call in HTML.
In Sugarcube there is a way by using the data-passage attribute on elements like:

<a data-passage ="test"> foo </a>

or even

<a data-passage="test" class="map_link" id="map_link_0" title=""></a>

inside of an img element with image maps.

But this does not work in Harlowe, and I didn't find anything related to this topic. Could anyone give me some hints?

greyelf

There is no equivalent of SugarCube's data-passage attribute that I know of but you can create a click-able image by replacing the "Link Text" of a (link:) macro with a HTML <img> tag:

(link: "<img src='images/smilyface.png'>")[(goto: "Passage 2")]

mikawa

Yes, I know, but my problem is the image map:

The whole code looks like:

<style type="text/css">
	.map_image { display: block; width: 875px; height: 1063px; position: relative; background-position: 0 0; background-repeat: no-repeat; }
	.map_image .map_link { display: block; position: absolute; text-indent: -999em; overflow: hidden; }
	.map_image #map_link_0 { width: 166px; height: 94px; top: 0px; left: 0px; }
	.map_image #map_link_1 { width: 120px; height: 59px; top: 0px; left: 0px; }
	.map_image #map_link_2 { width: 145px; height: 91px; top: 0px; left: 0px; }
	.map_image #map_link_3 { width: 104px; height: 48px; top: 0px; left: 0px; }
	.map_image #map_link_4 { width: 191px; height: 93px; top: 0px; left: 0px; }
	.map_image #map_link_5 { width: 204px; height: 97px; top: 0px; left: 0px; }
	.map_image #map_link_6 { width: 99px; height: 59px; top: 0px; left: 0px; }
</style>
<div class="map_image" style="background-image: url('...url...');">
	<a class="map_link" id="map_link_0" title="" href=""></a>
	<a class="map_link" id="map_link_1" title="" href=""></a>
	<a class="map_link" id="map_link_2" title="" href=""></a>
	<a class="map_link" id="map_link_3" title="" href=""></a>
	<a class="map_link" id="map_link_4" title="" href=""></a>
	<a class="map_link" id="map_link_5" title="" href=""></a>
	<a class="map_link" id="map_link_6" title="" href=""></a>
</div>

The first part went into the css file, the sceond is written in the passage. Twine displays my picture with the map properly, and the links are also where they should be, but since I want to display a certain passage instead of a HTML-site, I guess I would need the appropriate javascript function to go over to the new passage when clicking on one of the areas defined above.

When I simply write your code snippet inside the div container above, it won't work.
Could I use onclick="javascript:..." inside the map_link containers or something like that?

greyelf

Harlowe does not currently have a documented Javascript API

mikawa

Well, then, I guess, it would be recommended for authors who want to include image maps, to use either Sugarcube or Twine 1. (for now)

(link: "<img src='images/smilyface.png'>")[(goto: "Passage 2")]

BTW: When I c&p your code above into a passage (using a picture of my own instead), this passage will never appear, but the game will jump to "passage 2" without any click.

I've found out that if you use this syntax:

[[<img src='images/smilyface.png'/>->Passage 2]]

it'll work fine, but again -- not within an HTML codeblock...

feliwebwork

mikawa wrote: »

(link: "<img src='images/smilyface.png'>")[(goto: "Passage 2")]

BTW: When I c&p your code above into a passage (using a picture of my own instead), this passage will never appear, but the game will jump to "passage 2" without any click.

Try it this way:

(link: '<img src="images/smilyface.png">')[(goto: "Passage 2")]

It has worked for me before.

SophieD

Don't know if you are still looking for an alternative in Harlowe to use Image maps... Might be dirty coding, but hey it works...

<img src = "IMAGE URL"; width=100% height=auto alt="Locations" usemap="#Locations">

<map name = "Locations">
[<area shape= "rect" coords = "0,0,82,126" alt="FirstPassage" >]<HookLink1|(click: ?HookLink1)[(goto: "FirstPassage")]
[<area shape= "rect" coords = "90,0,161,126" alt="SecondPassage" >]<HookLink2|(click: ?HookLink2)[(goto: "SecondPassage")]
</map>