Clickable regions in images

Feature requests
,
1

Use case or problem

I want to add clickable links to regions of an image. E.g., consider a map of Africa - clicking on the individual countries on that map should then open a separate note with information about that country. This is basically what HTML image maps do.

I found this closed article stating that it should be possible to use HTML image maps by means of embedded HTML. However, this is only partially true. I can see that the image maps themselves do work to some extent, because after defining an image map and applying it to an image, the mouse cursor changes when hovering the clickable areas.

Try this markdown:

<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="https://afran.org/wp-content/uploads/2021/03/AfricaMapLarge.jpg" usemap="#image-map">

<map name="image-map">
    <area target="" alt="Marocco" title="Marocco" href="Marocco.md" coords="200,11,185,27,174,32,163,42,157,59,132,75,119,91,110,92,98,111,84,139,113,138,120,126,128,121,134,100,162,101,162,76,190,68,197,62,206,55,225,47,226,31,226,20,213,17" shape="poly">
    <area target="" alt="Mali" title="Mali" href="Mali.md" coords="192,110,177,110,176,197,122,198,115,202,117,221,121,229,137,231,145,242,154,250,166,245,174,247,175,237,180,233,190,223,196,215,215,208,227,208,239,206,257,204,262,192,263,176" shape="poly">
</map>

You will notice the following:

  1. When hovering the supposed clickable areas on the image the cursor changes from an arrow to a hand symbol (this is Windows) indicating the clickable area. This is good!
  2. However, clicking on the clickable area does nothing, because internal links don’t seem to work here. Web links such as https://obsidian.md/ do work, but that’s not what I want.
  3. The image scales depending on the size of the note window. However, the coordinates of the image map are not scaled accordingly - therefore, the clickable regions appear in the wrong spot. I tried setting width="100%" and also style="width:100%" on the <img>-tag expecting the image to keep a fixed size regardless of the note window size, but Obsidian does not seem to respect that.

Regarding internal links within HTML I found this article. It claims internal links do work within Obsidian markdown if they have the form

<a href="absolute or relative vault path to note" class="internal-link">click that</a>

Indeed, if I create a link to an internal note with the <a>-tag like this, then it works. However, it does not work for the <area>-tag of an image map even if I add class="internal-link". Also, for obvious reasons, filename change propagation does not work when using internal links within embedded HTML.

Thus, embedding images with clickable regions in your notes is not possible as of today.

Proposed solution

I assume, the easiest way would probably be to make clickable links to internal notes work with the <area>-tag of an image map. The scaling issue would also require a solution - ideally that would be to scale the coords together with the image itself similar to how browser such as Chrome or Safari do it. Alternatively, enabling fixed size images in embedded HTML would be a possibility, but certainly not the preferred one.

That being said, a separate, native feature within Obsidian that enables point-and-click-definition of clickable regions and that also keeps filename change propagation working for the links on these regions would be a much (!) cooler thing. Obviously, messing around with coordinates and HTML is not something that every Obsidian user would do, so a native feature would really enable the entire user base to get the most out of their notes.

Current workaround (optional)

Yes, I did see the post mentioning a New Plugin: Obsidian Leaflet - Interactive maps in notes. However, for hopefully understandable reasons, using a potentially compromised or unmaintained community plugin that does crazy Javascript stuff for something as simple as a static image map is not my first choice.