Image Map link failure

Authoring Twine
1

If you are requesting technical assistance with Twine, please specify:
Twine Version: 2.5.1
Story Format: Sugar Cube
I am new to Twine and am trying to use an Image Map to link to passages.
The image has several links which have worked in other Non Twine HTML code.
In Twine only one link works , “Message”.
I would welcome any suggestions as to how to debug this.

<img src="http://localhost/geohunt/Desk/Auth/images/envoy1.png" usemap="#image-map">

<map name="image-map">
    <area alt="date" title="date"  coords="250,16,477,41" shape="rect"data-passage="Passage 1">
    <area alt="Library" title="Library"  coords="256,510,380,582" shape="rect"data-passage="Passage 1">
    <area  alt="To Do" title="To do List" coords="706,117,851,225" shape="rect"data-passage="Passage 1">
    <area alt="What is the Time?" title="What is the Time?" coords="104,139,61" shape="circle"data-passage="Passage 2">
    <area  alt="Message" title="Message" coords="188,276,53,411" shape="rect" data-passage="Passage 1">
    <area  alt="Reminders" title="Reminders"  coords="714,288,849,379" shape="rect"data-passage="Passage 1">
    <area alt="Notes" title="Notes" coords="540,263,682,333" shape="rect"data-passage="Passage 1">
    <area  alt="Thesuarus" title="Thesuarus" coords="372,257,510,348" shape="rect"data-passage="Passage 1">
</map>
2

Just guessing at this but all your data-passage values are the same:
data-passage=“Passage 1”
Maybe try changing one to an actual passage name and see if that helps.
Good luck!

3

Look closely at your example code. What’s different about that one <area> tag?

Working:

<area … shape="rect" data-passage="Passage 1">

Not working:

<area … shape="rect"data-passage="Passage 1">
<area … shape="rect"data-passage="Passage 1">
<area … shape="rect"data-passage="Passage 1">
<area … shape="circle"data-passage="Passage 2">
<area … shape="rect"data-passage="Passage 1">
<area … shape="rect"data-passage="Passage 1">
<area … shape="rect"data-passage="Passage 1">
(Click to see the answer)

You need whitespace between your attributes.

I.e., this:

shape="…"data-passage="…"

Should be:

shape="…" data-passage="…"
4

Thanks. That fixed it. Perils of cut and paste