0 votes
by (120 points)
I know other people have asked about images with different clickable regions and the answer is always image mapping but I haven't seen any that work for sugarcane. I found a tutorial on image mapping in CSS and I got the different clickable regions to be there where I wanted them and the lines showing it linked to the pages I wanted show up in the map but when I click on them in the test play it says file not found, any help would be appreciated!

1 Answer

0 votes
by (159k points)

WARNING: The (vanilla) Story Formats that come with the Twine 1.x application haven't been updated in years and they include known bugs, as well as incompatibilities with modern web-browser. I strongly suggests changing to the SugarCube 2.x series story format, which is actively being developed and patched.

It would help if you supplied an example of your implementation of a image map, so that we know exactly what you tried to do, which in turn would allow use to determine why it is not working.

One method you can use to achieve the effect you want is to add onclick event handlers to each of the child area elements that belong to your map element. The onclick event handlers could call the undocumented state.display() function to cause a Passage Transition to occur.

The following example is based on the code of the map element's Live Example.

1. Add the following map element to the current passage, it defines a left and right circle area on the referenced image, clicking in the Left area will send you to the Left Circle passage and clicking in the Right area will send you to the Right Circle passage.

<img usemap="#primary" src="https://placehold.it/350x150" alt="350 x 150 pic">
<map name="primary">
  <area shape="circle" coords="75,75,75" onclick="state.display('Left Circle');">
  <area shape="circle" coords="275,75,75" onclick="state.display('Right Circle');">

2. Add a Left Circle passage with the following

You clicked in the Left circle area of the image map.

3. Add a Right Circle passage with the following

You clicked in the Right circle area of the image map.

If you build and run the story then clicking clicking on either side of the displayed image should cause a Passage Transition.

by (120 points)
Thank you! I know that twine 1.x is getting outdated but what I'm trying to do is very image heavy and I much prefer the image implementation in 1.x to that of 2.x
by (159k points)

I didn't suggest you stop using the Twine 1.x application to create your story.

I suggested you change which Story Format you are using (in Twine 1.x) from Sugarcane to SugarCube 2.x

You can download a Twine 1.x compatible release of SugarCube 2.x from here.