Link different parts of an image to different href?

I’ve tried it with this on a content page “page-01.md” :

<img src="/images/content/cont_a001_fibaoverview.png" width="1138" height="701" alt="testo10" usemap="mapffnov1">
<map name="mapffnov1">
  <area shape="circle" coords="100,100,100" alt="TEST2" href="./page-02">
  <area shape="circle" coords="200,100,100" alt="TEST3" href="./page-03">
</map>

without success since the “featherlight” class kicks in.

What we need to achive is this: HTML area Tag since we want to use HUGO as a documentation tool with clickable block diagrams.

Is there a shortcut we missed or is there a workaround to override the built in image clicks?

wow, image maps. Had not seen these in a while.

You seem to be on the right path, just double check your href urls or make them absolute. Remember that if these are in a markdown file, you can’t use template functions.

1 Like

Agree with @brunoamaral, the relative href="./page-02" url’s you’re using could be problematic. I’d prefer absolute url’s too, like: href="/page-02" or href="/path/to/page-02"

1 Like

Thanks, guys. Will try…

1 Like

A post was split to a new topic: Image Maps