Image map when clicked shows text on same passage (not linked to another passage)

Question

Hello I am working on my twine game in sugarcube and I added an image map to make image interactive, but I'm having trouble with data-passage tag. Right now I have it set up where when you click on the section of the image it takes you to another passage with the caption, but I would like instead to have the caption appear next to the image on the original page. Is this possible with a set and print function? (I don't know much about these function, I've only used them sparingly in my games.)

The 1st code snippet is the original passage that links to others. The 2nd code snippet is the linked passage (panel2_a) which is replicated for the panels 2_a through panel2_e.

<img src="http://pages.iu.edu/~gcreekba/arch_ss/panel2_map_sm.png" usemap="#image-map" class="panel">

<p class="info2">This panel shows the submission of Edessa and the forced allegiance of its king, Abgarus</p>

<map name="image-map">
    <area target="" alt="section_a" title="section_a" data-passage="panel2_a" coords="17,375,698,694" shape="rect">
    <area target="" alt="section_b" title="section_b" data-passage="panel2_b" coords="22,257,698,372" shape="rect">
    <area target="" alt="section_c" title="section_c" data-passage="panel2_c" coords="24,158,357,255" shape="rect">
    <area target="" alt="section_d" title="section_d" data-passage="panel2_d" coords="361,17,696,255" shape="rect">
    <area target="" alt="section_e" title="section_e" data-passage="panel2_e" coords="21,16,358,157" shape="rect">
</map>

<img src="http://pages.iu.edu/~gcreekba/arch_ss/panel2_map_sm.png" usemap="#image-map" class="panel">

<p class="info2">Section A shows the Roman army marching on Edessa.</p>

<map name="image-map">
    <area target="" alt="section_a" title="section_a" data-passage="panel2_a" coords="17,375,698,694" shape="rect">
    <area target="" alt="section_b" title="section_b" data-passage="panel2_b" coords="22,257,698,372" shape="rect">
    <area target="" alt="section_c" title="section_c" data-passage="panel2_c" coords="24,158,357,255" shape="rect">
    <area target="" alt="section_d" title="section_d" data-passage="panel2_d" coords="361,17,696,255" shape="rect">
    <area target="" alt="section_e" title="section_e" data-passage="panel2_e" coords="21,16,358,157" shape="rect">
</map>

 

Answer 1

I believe what you want would just be this:

<img src="http://pages.iu.edu/~gcreekba/arch_ss/panel2_map_sm.png" usemap="#image-map" class="panel">

<p id="info" class="info2">This panel shows the submission of Edessa and the forced allegiance of its king, Abgarus</p>

<map name="image-map">
    <area title="Section A" coords="17,375,698,694" shape="rect" onclick="$('#info').empty().append('Section A shows the Roman army marching on Edessa.')">
    <area title="Section B" coords="22,257,698,372" shape="rect" onclick="$('#info').empty().append('Section B shows the Roman\'s camp.')">
    <area title="Section C" coords="24,158,357,255" shape="rect" onclick="$('#info').empty().append('Section C shows ???.')">
    <area title="Section D" coords="361,17,696,255" shape="rect" onclick="$('#info').empty().append('Section D shows ???.')">
    <area title="Section E" coords="21,16,358,157" shape="rect" onclick="$('#info').empty().append('Section E shows Julias Caesar saying, &quot;Et tu, Brute?&quot;')">
</map>

This uses the onclick event on those areas to trigger some JavaScript (using jQuery) when clicked which will remove the existing contents of the element with the "info" ID (referred to by $("#info") ), and then add in new contents.  (You can see the .empty() and .append() methods in the jQuery API documentation for further details on how they work.)

I also showed in "Section B" how to display an apostrophe (using \' ) and in "Section E" how to display a double-quote (using " ) just in case you needed to know how to do that.

Hope that helps!  :-)

Comments

Thank you! This works perfectly!