CODEWITHSUNDEEP
jekyllimagemap
Wilson Mar
Wilson Mar

Reputation: 25

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?

Upvotes: 2

Views: 972

Answers (1)

David Jacquel
David Jacquel

Reputation: 52829

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>

Upvotes: 3

Related Questions