Search code examples
jekyllimagemap

Clickable image map in Jekyll site

I would like to add a clickable map to my jekyll site on github.

For example, a map of the US which I click to reach an anchor tag containing text related to the state clicked.

An example of what I hope to end up with is at: http://wilsonmar.github.io/museums-roadtrip-usa/

There are two different approaches: HTML and CSS.

Are there examples of either for jekyll hosted on github pages?

Solution

  • In order to generate an html image-map with Jekyll, you can use collections.

    file: _us-states/alaska.md

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

    An you generate your image-map like this :

    <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>