在 Github 的 readme.md 文件中使用图像映射

Question

有没有办法在readme.md文件中包含一个具有usemap属性的图像？

纯html应该是：

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

由于多种原因，我无法使其工作。

• usemap属性被保留，但地图块被删除。如果我没记错的话，这并不奇怪，因为map标签不在html白名单中。
• 图像映射不能在锚标签内部，但是github markdown将其呈现为指向原始文件位置的a标签以及其中的img标签。

我没有看到任何选项，你有吗？

- Werner Daehn

---

通常情况下，答案是使用原始HTML。但如果“map”标签不在GitHub的白名单上，则不可能实现。不确定您希望得到什么样的答案。没有秘密/未记录的Markdown功能。 - Waylan

Answer 1

好的，我想到了一个解决方案并建议使用CSS而不是img的usemap属性。

我想出的最好的答案是使用github页面——这些是由github托管的静态网页，因此你可以在那里做任何你想做的事情。

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

这将创建一个新的分支gh-pages，只使用这些html文件。非常方便，因为您不必为更改检入主分支。

最终结果不是README.MD文件中的图像映射，而是我添加了指向使用imagemap的github页面index.html的链接。imagemap指向各种github资源。所以不是内联README.MD，而是一次点击。

第二个发现：不要使用图像映射，而是使用CSS。Imagemap坐标取决于浏览器呈现的图像宽度，而不是图像本身的宽度。因为在github中使用max-width样式属性是标准，所以图像经常被缩小，imagemap的坐标也没有随之改变。

使用CSS要好得多——参见“响应式图像映射”——和百分比值。

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

由于图像和锚点标签都位于一个相对定位的块元素内，而锚点标签是绝对定位的，因此锚点位置会随着图像的缩放而改变。

- Werner Daehn

---

我认为你的第二个发现会在README.md文件和/或github的维基页面中起作用。然而，看来并不是这样。 - RayLuo