Using an image map in a github readme.md file

Question

Is there any option to include an image in a readme.md file, which has a usemap attribute?

Pure html would be

<img src="myimage.png" usemap="#mymap"/>
<map name="mymap">
  <area coords="1,1,40,40" href="mylink.html"/>
</map>

I can't get that to work for multiple reasons

• usemap is retained as attribute but the map-block is removed. Not surprising as the map-tag is not on the html whitelist, if I am not mistaken.
• An image map cannot be inside an anchor tag but github markdown renders it as a-tag pointing to the raw file location and the img-tag inside.

I don't see any option, do you?

Answer 1

Okay, sort of a solution and the advice to use CSS, not img's usemap attribute.

The best answer I came up with was using github pages - these are static web pages hosted by github and therefore you can do everything you want there.

https://help.github.com/articles/creating-a-github-pages-site-with-the-jekyll-theme-chooser/

This creates a new branch gh-pages and only those html files are used. Very convenient as you do not have to checkin into the master branch for changes.

The endresult is not an image map inside the README.MD file, but there I have added a link to the github-pages index.html which is using the imagemap. The imagemap points back to the various github resources. So not inline the README.MD but one click away.

Second finding: Don't use image maps but CSS instead. Imagemap coords depend on the width of the image as rendered by the browser, not on the width of the image itself. As in github the standard is to use a max-width style property, the image often gets scaled down - and the coords of the imagemap are not.

Much better to use CSS - see "responsive image maps" - and percent values.

<p style="position: relative;">
  <img ....>
  <a style="position: absolute; top: 10%; left: 10%; width: 30%; height: 15%" href=....></a>
</p>

As both, the image and the anchor tag are inside a block element which is of position relative and the anchor tag is of position absolute, the anchor position is scaled with the image.