Imagemaps links problem

Twine Version: [Harlowe]

Hello!
Firstly, english aint my language, so please excuse any nonsensical non-grammatical errors, please.
Also I am very sorry for the long explanation of everything, i just dont know how to explain myself properly without it.

Secondly, thank you all who are answering here, none of my projects would be possible without you, i will name my firstborn after you.

And finally:
Can you please give me some tips for the code im struggle with?
I have a passage that has a clickable imagemap with 11 areas to click on.
The image is a library shelf and 11 options are diffo books to be clicked. And when the image area is clicked, the description text of attached hook appers.
That works fine and no problem there.
What i am struggeling with is the next step. I want the text to disappeare after the player clicks on different area in the map and show ONLY the text for the current area.
And i just cant figure it out with some simple solution.
I know i can create 11 new passages for each of the clicked areas, but there has to be some simple solution.
So far i tried the hide macro, click-replace and click-rerun in the imagemap passage, but none of those did what i wanted. It is also possible i just didnt use them right, but my brain is melting and i am at my wits ends.

I am still fairly new to harlowe and i feel like there is a very easy and elegant solution to my problem that i am missing somehow.

{(click-replace:?1) [
„Otevřeš knihu s názvem **‘Příručka alchymie’**. Uvnitř jsou staré recepty, ale žádná mystika.“]  
(click-replace:?2)[
„Tato kniha, **‘Tajemství pohanských kultů’**, pojednává o rituálech, ale nic víc v ní není.“]  
(click-replace:?3)[
„Otevíráš **‘Symbolika snů’**, ale hned vidíš, že se jedná jen o starou psychologickou příručku.“]  
(click-replace:?4)[
„**‘Dějiny astrálních cest’** zní slibně, ale když ji otevřeš, jsou v ní jen prázdné stránky…“]  
(click-replace: ?11)[    (set: $encyklopedieFound to true)
    „Našel jsi **Encyklopedii mystiky**! Konečně něco, co stojí za to!“]  
(click-replace:?5)[„Kniha s názvem **‘Okultní znaky ve starých textech’** je zajímavá, ale ne to, co hledáš.“]  
(click-replace:?6)[„V rukou držíš **‘Legenda o ztraceném městě’** – příběh, ne věda.“]  
(click-replace: ?7)[„**‘Kronika temných věků’** obsahuje historická fakta, ale žádnou mystiku.“]  
(click-replace:?8)[„**‘Tajemství světelných iluzí’** je o optických klamech, nic víc.“]  
(click-replace:?9)[„Na stole leží starý deník, ale stránky jsou vytrhané…“]  
(click-replace:?10)[Kopa švabachu, tohle nepřečteš. ]
<!--hledají encyklopedie mystiky-->  

(set: $encyklopedieFound to false)

<img src="URL OF MY IMAGEMAP" usemap="#bookshelfMap">
<map name="bookshelfMap">
[<area shape="rect" coords="121,3,190,202" href="#" alt="">]<1|
[<area shape="rect" coords="254,7,327,204" href="#" alt="levá střední polička">]<2|
[  <area shape="rect" coords="46,689,122,960" href="#" alt="levá dolní polička">]<3|
[  <area shape="rect" coords="117,269,209,618" href="#" alt="střední horní polička">]<4|
[  <area shape="rect" coords="273,264,365,618" href="#" alt="střední polička">]<5|
[  <area shape="rect" coords="206,674,363,955" href="#" alt="střední dolní polička">]<6|
[  <area shape="rect" coords="663,2,733,201" href="#" alt="pravá horní polička">]<7|
[  <area shape="rect" coords="738,272,783,615" href="#" alt="pravá střední polička">]<8|
[  <area shape="rect" coords="745,678,836,966" href="#" alt="pravá dolní polička">]<9|
[  <area shape="rect" coords="420,699,453,957" href="#" alt="kniha ležící na stole">]<10|
[  <area shape="rect" coords="360,250,649,620" href="#" alt="Encyklopedie mystiky">]<11|
</map>
}

This is the code with the “click-replace” macro, that doesnt do what i want, it just keep adding the text of each clicked area when clicked.
When i was using the hide macro it did look like (click:?1)[(hide:?2)(hide:?3) THE TEXT ABOUT THIS BOOK I WANT THEM TO SEE] and all that did was it entairly disable the clickable areas in the image and that is not what i am looking for.

Please help, if you have any idea that does not require 11 new passages, that is what i am trying to avoid. Thank you!

1 Like

Here is a working example of what I believe you want to accomplish. You can copy and paste this code into a passage. (The image linked is free and safe to use and view.)

{
(click-rerun: ?top)[(replace: ?book)[Top half of image.]]
(click-rerun: ?bottom)[(replace: ?book)[Bottom half of image.]]
<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>
}
|book>[]

One thing to keep in mind is that the href attribute in an image map <area> can sometimes trigger and do undesirable things unbeknownst to Harlowe so you have to deliberately make it do nothing. Currently, the safest way to have a proper href attribute that does nothing is to have it run some JavaScript that “does nothing” → void(0)

I hope this helps you.

1 Like

This is genious, thank you so much! Its exactly what i was looking for.’
I’ll let you know when i get my firstborn, they’ll have your name. My word is my bond :smile:

1 Like