Making a clickable part of an image reveal text

Authoring Twine
1

Harlowe 3.3.3.

I’m using this command to make it so that if you click on something it reveals text.

[Beef]<cheese|
(click: ?cheese)[Cheese]

That makes the word cheese appear.
And I can do this with an image and it works:

[<img src="beef.jpg"/>]<cheese|
(click: ?cheese)[Cheese]

But not with only PART of an image that’s clickable. Like so:

[<img src="beef.jpg" usemap="#image-map">

<map name="image-map">
    <area target="" alt="" title="" href="" coords="520,246,848,665" shape="rect">
</map>]<cheese
(click: ?cheese)[Cheese]

This does cause the text, in this example “cheese,” to appear–but only for a split second, before Twine forcibly reloads the passage.

Anyone know a way to make this work?

2 Likes
2

The problem is that the image map has an empty href attribute and that causes it to be a link that refreshes the passage (outside of Harlowe’s normal behaviour).

If you remove that attribute, it should work fine. If removing the href causes accessibility issues, you can always put href="javascript:void(0)". It’s also good to wrap the hook around just the map coordinate you want to trigger.

This is a working version, similar to your code example, with 2 clickable areas:

{<img src="https://fastly.picsum.photos/id/168/200/300.jpg?hmac=ILU5dddz6ohoQEq3_1fmoy2wEFfM1V1JfjLX_JsbOz0" usemap="#image-map"/>
<map name="image-map">
	[<area target="" alt="" title="" href="javascript:void(0)" coords="0,0,200,150" shape="rect">]<top|
    [<area target="" alt="" title="" href="javascript:void(0)" coords="0,150,200,300" shape="rect">]<bottom|
</map>}
(click: ?top)[Top Half]
(click: ?bottom)[Bottom Half]

I used a free image so you can copy and paste this code and see it in action. Also, I only tested this in Firefox.

Let us know if you have any other questions.

Oh, and welcome to the community! :slight_smile:

5 Likes
3

Oh, okay…yeah, I just copied that code from a website that lets you easily generate image maps without really understanding everything there. Works now. Thanks!

2 Likes