How to create imagemap in gitlab markdown file

Desired result

Attempt 1 : SVG - Built in links - with markdown code

it is possible to implement urls in an svg file.
I inserted the links with inkscape. When i open the image with the browser the image works as a clickable image.

I inserted the image in the markdown-file :

 ![](img/myimage.svg)

Result

  • The image is not displayed

Attempt 2 : SVG as a link

 [link to image](img/myimage.svg)

Result

  • a download-dialogbox to download the file

Attempt 3 : SVG - http imagemap

    <!-- Image Map Generated by http://www.image-map.net/ -->
    <img src="img/myimage.svg" usemap="#image-map">
    
    <map name="image-map">
        <area target="_blank" alt="index" title="index" href="http://www.example.com" coords="84,35,214,71" shape="rect">
    </map>

Result

  • image is visible in the markdown file
  • a download-dialogbox appears when clicking the image

Attempt 4 : PNG File - imagemap

uploading svg like mentioned in https://stackoverflow.com/a/48305296/4098275


<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="/uploads/b6ed39d194c0a6b6e91322fb388908fa/faas_gewoon.png" usemap="#image-map">

<map name="image-map">
    <area target="_blank" alt="overview" title="overview" href="http://www.example.com" coords="84,35,214,71" shape="rect">
</map>

Result

  • image is visible in the markdown file
  • when clicking the image, the browser is redirected to the source-file of the image

Attempt 5 : PNG File - javascript detect click

<script>
function ClickRepsonse(){
alert ("clicked the image");
}
</script>

<img src="/img/myimage.png" onClick="ClickRepsonse()" />

Result

  • image is visible in the markdown file
  • when clicking the image, the browser is redirected to the source-file of the image

Attempt 6 : inline image with html imagemap

<img src="data:image/png;base64,iVBORw......"
usemap="#image-map" >

    <map name="image-map">
        <area target="_blank" alt="index" title="index" href="http://www.example.com" coords="0,0,100,100" shape="rect">
    </map>

Result

  • image NOT visible in the markdown file on gitlab
  • code works in jsfiddle but this is pure html

My Questions

  • how can i make i clickable image in a markdown file on the gitlab -platform?
  • Are there any other options to make a clickable image in a markdown