Is it possible to create a clickable image?

Question

I would like to add an image map to my Guided Track, is that currently possible?

This shows me that the code got sanitized:

*html

<img src="https://images.unsplash.com/photo-1547656807-9733c2b738c2?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=934&q=80" alt="Workplace" usemap="#workmap">

<map name="workmap">

  <area shape="rect" coords="34,44,270,350" alt="Computer" href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">

  <area shape="rect" coords="290,172,333,250" alt="Phone" href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">

  <area shape="circle" coords="337,300,44" alt="Coffee" href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">

</map>

This is the original article describing 'image hit maps':

https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image

Warmly,
Pascal

Answer 1

If image maps get sanitized, that’s unfortunate. Essentially it would be a new feature to support this and I think we don’t have capacity for that now.

Depending on what you want to do, however, *component might fit the bill. See the documentation for *component (it takes a while to jump to the right place).

There is another workaround, which is hosting the image map on an external page and make the user go GuidedTrack program → external page → GuidedTrack program#some-label.

1. Host an HTML page with just your image map somewhere, eg. on GitHub Pages. Say it's called https://pascal.github.io/map.html
2. In your GuidedTrack program when you want the user to see the image, use
   *goto: https://pascal.github.io/map.html
3. The image maps contains links back to the program.
   https://www.guidedtrack.com/programs/abc234d/run#some-label