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>