Jekyll 站点中的可点击图像映射
Clickable image map in Jekyll site
我想在 github 上的我的 jekyll 网站上添加一个可点击的地图。
例如,我点击到达锚标记的美国地图
包含与点击状态相关的文本。
我希望最终得到的示例位于:
http://wilsonmar.github.io/museums-roadtrip-usa/
有两种不同的方法:HTML 和 CSS。
github 页面上是否有托管 jekyll 的示例?
为了使用 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>
我想在 github 上的我的 jekyll 网站上添加一个可点击的地图。
例如,我点击到达锚标记的美国地图 包含与点击状态相关的文本。
我希望最终得到的示例位于: http://wilsonmar.github.io/museums-roadtrip-usa/
有两种不同的方法:HTML 和 CSS。
github 页面上是否有托管 jekyll 的示例?
为了使用 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>