Jekyll 站点中的可点击图像映射

Question

我想在 github 上的我的 jekyll 网站上添加一个可点击的地图。

例如，我点击到达锚标记的美国地图包含与点击状态相关的文本。

我希望最终得到的示例位于： http://wilsonmar.github.io/museums-roadtrip-usa/

有两种不同的方法：HTML 和 CSS。

github 页面上是否有托管 jekyll 的示例？

Answer 1

为了使用 Jekyll 生成 html 图像映射，您可以使用集合。

文件：_us-states/alaska.md

---
name: Alaska
abbrev: AK
coord: "52,249,42,253,..."
---
Your text here

您可以像这样生成图像映射：

<img src="image.png" alt="Us states" usemap="#us-states" />
<map name="us-states">
{% for s in site.collections['us-states'] %}
    <area shape="poly" coords="{{ s.map.coord }}" 
          href="{{ site.baseurl }}{{ s.url }}" 
          alt="{{ s.name }}" title="{{ s.name }}" >
{% endfor %}
</map>

Jekyll 站点中的可点击图像映射

Clickable image map in Jekyll site

jekyll

imagemap