Hi guys,
Any tips or examples of image mapping?
I’d like to use an image of the USA map that links to a new passage based on region. I did find an example from an old Twine forum saying to use Javascript to add an onclick handler to the area elements.
Here is my image map:
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Map_of_USA_with_state_names.svg/langes-1600px-Map_of_USA_with_state_names.svg.png" usemap="#image-map">
<map name="image-map">
<area target="" alt="NW" title="NW" href="Northwest" coords="30,263,102,17,580,122,561,403" shape="poly">
<area target="" alt="MW" title="MW" href="Midwest" coords="585,119,563,405,612,408,605,548,968,561,1189,401,1175,346,1067,194" shape="poly">
<area target="" alt="NE" title="NE" href="Northeast" coords="1180,343,1192,421,1341,468,1490,161,1426,73" shape="poly">
<area target="" alt="SW" title="SW" href="Southwest" coords="38,277,48,565,718,957,841,808,810,558,596,552,601,415" shape="poly">
<area target="" alt="SE" title="SE" href="Southeast" coords="817,561,844,814,1160,800,1264,935,1288,749,1354,540,1319,470,1180,418,971,567" shape="poly">
</map>
Then it said to add markup links that you would hide via CSS, but use Javascript to send a click event with these links. So I have this following the image map:
<div style="display:none">
[[Go to Northwest->Northwest]]
[[Go to Midwest->Midwest]]
... and so on.
</div>
Then at the end of the passage, add the javascript that locates the area map via alt attribute and assigns the onclick handler link to it. Like so:
<script>
$('area[alt="NW"]').on("click", function(e){
e.preventDefault();
$("tw-link[passage-name='Northwest']").click();
});
</script>
After all of this code, what I do see is that the Northwest region does have a link attached to it of /Northwest
but it doesn’t direct it to my existing passage with that name. Does anyone know what I’m doing wrong here? Is there a better approach I could be doing in regards to image mapping? Thanks so much for reading through all of this!
Twine Version: 2.3.7
Story Format: Harlowe 3.1.0